如何在grunt期间删除一些javascript
我有代码可以让编写/测试代码变得简单快捷，代码不属于我的生产代码（主要是嘲笑服务器，所以我只需要grunt服务器）。
这两个部分，一个是如何删除脚本的一部分
angular.module('nglaborcallApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'server_mocks', // Don't want this line in the production build
'dialogs'
]
然后是一段需要消失的index.html
<!-- build:js({.tmp,app}) scripts/mocks/mocks.js -->
<script type='text/javascript'>var Mocks = {};</script>
<script src='scripts/mocks/jobs.js'></script>
<script src='scripts/mock.js'></script>
<!-- endbuild -->
所以这可能是2个问题。 我在usemin文档中看不到任何关于此的内容，所以我猜测还有其他一些工具，但我不知道该工具的名称是什么。
另一种可能是我做错了，而不是注入这个嘲弄的对象，我应该用grunt服务器来做。 其他人在做什么？
好的，在寻找别的东西的时候偶然发现了答案，因为还没有人回应。 这是我如何解决它的：
你会得到一份Grunt Preprocess的副本
npm install --save-dev grunt-preprocess
然后你像这样修改你的GruntFile.js （这是一个角度项目，YMMV）
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-preprocess'); <-- Add this line near the top of the file
将其添加到子任务列表中
preprocess : {
options: {
inline: true,
context : {
DEBUG: false
}
},
html : {
src : [
'<%= yeoman.dist %>/index.html',
'<%= yeoman.dist %>/views/*.html'
]
},
js : {
src: '.tmp/concat/scripts/*.js'
}
},
修改您的注册任务（在文件的底部）像thils：
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'preprocess:js', // Remove DEBUG code from production builds
'preprocess:html', // Remove DEBUG code from production builds
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin'
]);
然后修改您现有的JavaScript代码，如下所示：
// @if DEBUG
'server_mocks', // Won't be included in production builds
// @endif
和你现有的html代码是这样的：
<!-- @if DEBUG -->
<script src='scripts/mock.js'></script> <!-- Won't be included in production builds -->
<!-- @endif -->
看看dom munger（https://github.com/cgross/grunt-dom-munger），你可以给你想要的元素删除一个特定的属性或ID，并让它从html文件中删除它们。 但是，我最喜欢的是当我指定dev的目标时，通过append或prepend注入不需要的元素。 它保持原始的HTML清洁。 我还没有删除部分JavaScript。 根据你想更改的js文件中的其他内容，你可以为你的开发和发布版本注入不同版本的文件。
删除示例：
追加示例：
这里是您不需要额外工具的解决方案：
如文档中所述，您可以使用不是css / js的类型，这将在构建期间被删除
<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
所以你可以做这样的事情：
<!-- build:mockJs -->
<script type='text/javascript'>var Mocks = {};</script>
<script src='scripts/mocks/jobs.js'></script>
<script src='scripts/mock.js'></script>
<!-- endbuild -->
编辑 ：对于JavaScript，你可以使用uglify全局定义
http://github.com/gruntjs/grunt-contrib-uglify/blob/master/docs/uglify-examples.md#conditional-compilation
只需在你的gruntfile中做一个uglify配置：
grunt.initConfig({
...
uglify: {
options: {
compress: {
global_defs: {
"PROD": true
}
}
}
}
...
});
并在js做类似的事情：
var modules = ['ngCookies', 'ngResource',
'ngSanitize',
'ngRoute',
'dialogs'
]
if(!PROD) {
modules.push('server_mocks');
}
angular.module('nglaborcallApp', modules);
你也可以在你的调试块中添加这个全局JS
<!-- build:mockJs -->
<script type='text/javascript'>var Mocks = {};</script>
<script src='scripts/mocks/jobs.js'></script>
<script src='scripts/mock.js'></script>
<script type='text/javascript'>
PROD = false;
</script>
<!-- endbuild -->