Angularjs 使用Grunt在HTML/JS中进行条件处理

我正在开发AngularJS应用程序。我正在用Grunt构建这个应用程序。我有三个Grunt任务：开发、测试和发布。我希望在每种情况下都有条件地引用一些JavaScript文件。例如，我想做这样的事情：

index.html

<!-- if task === 'dev' -->
<script type="text/javascript" src="/js/script.dev.js"></script>
<!-- else if task === 'test' -->
<script type="text/javascript" src="/js/script.test.js"></script>
<!-- else -->
<script type="text/javascript" src="/js/script.min.js"></script>

同样，上面的代码是伪代码。我一直在追求用Grunt对JavaScript进行预处理的想法。非常感谢你

另一个选项是使用且仅替换变量：

grunt.initConfig({
  replace: {
    dev: {
      options: {
        patterns: [{
          json: {
            "script_src": "/js/script.dev.js",
            "service": "service"
          }
        }]
      },
      files: [{
        expand: true, 
        src: ['index.html', 'your-file.js']
      }]
    },
    test: {
      options: {
        patterns: [{
          json: {
            "script_src": "/js/script.test.js",
            "service": "serviceMock"
          }
        }]
      },
      files: [{
        expand: true, 
        src: ['index.html', 'your-file.js']
      }]
    },
    prod: {
      patterns: [{
          json: {
            "script_src": "/js/script.min.js",
            "service": "service"
          }
      }],
      files: [{
        expand: true, 
        src: ['index.html', 'your-file.js']
      }]
    }
  }
});

在html/js文件中，只需准备变量，例如：

<script type="text/javascript" src="@@srcipt_src"></script>

如果您的替换项会变大，您可以将其放入一些特定于目标的json文件中：

// e.g. content of dev.json
{
  "script_src": "/js/script.dev.js",
  "service": "service"
}

在开发子任务中：

dev: {
  options: {
    patterns: [{
      json: grunt.file.readJSON('dev.json')
    }],
    files: [{
      expand: true, 
      src: ['index.html', 'your-file.js']
    }]
  }
}

如果特定于目标的配置变大，这将是有意义的

有关html模板，请参见。对于javascript文件，这取决于您实际如何包含这些文件，例如requirejs、browserify和普通脚本标记。以及如何缩小它们。

// e.g. content of dev.json
{
  "script_src": "/js/script.dev.js",
  "service": "service"
}

dev: {
  options: {
    patterns: [{
      json: grunt.file.readJSON('dev.json')
    }],
    files: [{
      expand: true, 
      src: ['index.html', 'your-file.js']
    }]
  }
}