使用Grunt在HTML / JS中进行条件处理 [英] Conditional Processing in HTML / JS with Grunt

问题描述

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

index.html

 <！ -  if task ==='dev' - > 
< script type =text / javascriptsrc =/ js / script.dev.js>< / script> 
 <！ -  else if task ==='test' - > 
< script type =text / javascriptsrc =/ js / script.test.js>< / script> 
<！ - 其他 - > 
< script type =text / javascriptsrc =/ 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的想法。非常感谢！

解决方案

另一个选择是使用 grunt-replace ，只能替换变量：

  grunt.initConfig （{
替换：{
 dev：{
 options：{
 patterns：[{
 json：{
script_src：/ js / script.dev.js，
service：service
} 
}] 
}，
文件：[{
 expand：true ，
 src：['index.html'，'your-file.js'] 
}] 
}，
 test：{
 options：{
模式：[{
 json：{
script_src：/js/script.test.js，
service：serviceMock
} 
 $] 
}，
文件：[{
展开：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 / javascriptsrc =@@ srcipt_src>< / script> 
  

或

  var app = angular.module（'myApp'，['@@ service'，'otherModule']）; 
  

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

  //例如dev.json的内容
 {
script_src：/js/script.dev.js，
service：service
} 
  

并在您的开发子任务中：

  dev：{
 options：{
 patterns：[{
 json：grunt.file.readJSON（'dev.json'）
}]，
文件：[{
展开：true，
 src：['index.html'，'your-file.js'] 
}] 
} 
 } 
  

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

I'm working on an AngularJS app. I'm building this app with Grunt. I have three Grunt tasks: dev, test, and release. I would like to conditionally reference some JavaScript files in each case. For instance, I'd like to do something like this:

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>

The above is psedocode. Its the idea of conditionally referencing a file at build time with Grunt. In addition, I would like to do something similar in my JavaScript. I would like to do something like:

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

Once again, the above is pseudocode. I'm in pursuit of the idea of preprocessing my JavaScript with Grunt. Thank you so much!

解决方案

another option is to use grunt-replace, and only replace Variables:

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']
      }]
    }
  }
});

in your html/js files just prepare the vars, e.g.:

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

or

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

if your replacements will get large, you could just put it in some target-specific json files:

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

and in your dev-subtask:

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

this would make sense if your target-specific configurations get large.

这篇关于使用Grunt在HTML / JS中进行条件处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！