我试图使用Grunt作为我的网络应用程序的构建工具。
我想至少有两个设置:
I.开发设置-从单独的文件加载脚本，没有串联，
所以我的index.html看起来是这样的:
<!DOCTYPE html>
<html>
<head>
<script src="js/module1.js" />
<script src="js/module2.js" />
<script src="js/module3.js" />
...
</head>
<body></body>
</html>
2生产设置-加载我的脚本缩小和连接在一个文件，
根据index.html:
<!DOCTYPE html>
<html>
<head>
<script src="js/MyApp-all.min.js" />
</head>
<body></body>
</html>
问题是，当我运行grunt dev或grunt prod时，我如何让grunt根据配置创建这些index.html ?
或者也许我在错误的方向上挖掘，它会更容易总是生成MyApp-all.min.js，但把它里面要么我所有的脚本(连接)或加载器脚本异步加载这些脚本从单独的文件?
你们是怎么做到的，伙计们?
考虑processhtml。它允许为构建定义多个“目标”。注释用于有条件地从HTML中包含或排除材料:
<!-- build:js:production js/app.js -->
...
<!-- /build -->
就变成了
<script src="js/app.js"></script>
它甚至声称可以做这样漂亮的事情(参见README):
<!-- build:[class]:dist production -->
<html class="debug_mode">
<!-- /build -->
<!-- class is changed to 'production' only when the 'dist' build is executed -->
<html class="production">
我一直在寻找一个更简单、直接的解决方案，所以我结合了这个问题的答案:
如何放置if else块在gruntfile.js
并提出了以下简单的步骤:
Keep two versions of your index files as you listed and name them index-development.html and index-prodoction.html.
Use the following logic in your Gruntfile.js's concat/copy block for your index.html file:
concat: {
index: {
src : [ (function() {
if (grunt.option('Release')) {
return 'views/index-production.html';
} else {
return 'views/index-development.html';
}
}()) ],
dest: '<%= distdir %>/index.html',
...
},
...
},
run 'grunt --Release' to choose the index-production.html file and leave off the flag to have the development version.
没有新的插件添加或配置，没有新的任务。
