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

时间:2014-08-11 15:21:55

标签: angularjs gruntjs

我正在使用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>

以上是psedocode。它是在构建时使用Grunt有条件地引用文件的想法。另外,我想在我的JavaScript中做类似的事情。我想做点什么:

#IF RELEASE
var app = angular.module('myApp', ['service', 'otherModule']);
#ELSE
var app = angular.module('myApp', ['serviceMocks', 'otherModule']);
#ENDIF

再次,上面是伪代码。我正在追求用Grunt预处理JavaScript的想法。非常感谢你!

1 个答案:

答案 0 :(得分:0)

另一种选择是使用grunt-replace,只替换变量:

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>

var app = angular.module('myApp', ['@@service', 'otherModule']);

如果你的替换会变大,你可以把它放在一些特定于目标的json文件中:

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

并在你的dev-subtask中:

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

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