我正在尝试使用Grunt作为我的webapp的构建工具。
我想至少有两个设置：
予。开发设置 - 从单独的文件加载脚本，无需连接，
所以我的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>
II。生产设置 - 加载我的脚本缩小＆amp;在一个文件中连接，
使用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会更容易，但是将所有脚本（连接）或从异步文件异步加载这些脚本的加载器脚本放入其中？
你是怎么做的，伙计们？
答案 0 :(得分：161)
我最近发现了这些Grunt v0.4.0兼容任务：
围绕预处理npm模块的Grunt任务。
为将来的任务自动化环境配置的Grunt任务。
以下是我Gruntfile.js的摘要。
ENV设置：
env : {
options : {
/* Shared Options Hash */
//globalOption : 'foo'
},
dev: {
NODE_ENV : 'DEVELOPMENT'
},
prod : {
NODE_ENV : 'PRODUCTION'
}
},
预处理：
preprocess : {
dev : {
src : './src/tmpl/index.html',
dest : './dev/index.html'
},
prod : {
src : './src/tmpl/index.html',
dest : '../<%= pkg.version %>/<%= now %>/<%= ver %>/index.html',
options : {
context : {
name : '<%= pkg.name %>',
version : '<%= pkg.version %>',
now : '<%= now %>',
ver : '<%= ver %>'
}
}
}
}
任务：
grunt.registerTask('default', ['jshint']);
grunt.registerTask('dev', ['jshint', 'env:dev', 'clean:dev', 'preprocess:dev']);
grunt.registerTask('prod', ['jshint', 'env:prod', 'clean:prod', 'uglify:prod', 'cssmin:prod', 'copy:prod', 'preprocess:prod']);
在/src/tmpl/index.html模板文件中（例如）：
<!-- @if NODE_ENV == 'DEVELOPMENT' -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="../src/js/foo1.js"></script>
<script src="../src/js/foo2.js"></script>
<script src="../src/js/jquery.blah.js"></script>
<script src="../src/js/jquery.billy.js"></script>
<script src="../src/js/jquery.jenkins.js"></script>
<!-- @endif -->
<!-- @if NODE_ENV == 'PRODUCTION' -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.foo.com/<!-- @echo name -->/<!-- @echo version -->/<!-- @echo now -->/<!-- @echo ver -->/js/<!-- @echo name -->.min.js"></script>
<!-- @endif -->
我确信我的设置与大多数人不同，上述用途将取决于您的情况。对我来说，虽然它是一个很棒的代码，但Yeoman grunt-usemin比我个人需要的更强大。
注意：我只是今天发现了上面列出的任务，所以我可能错过了一项功能和/或我的流程可能会改变。目前，我喜欢grunt-preprocess和grunt-env提供的简单和功能。 ：）
投票结束的动机......
当我发布这个答案时，Grunt 0.4.x提供的解决方案并没有太多可供选择。现在，几个月之后，我猜想还有更多的选项，可以比我在这里发布的更好。 虽然我仍然亲自使用，并且喜欢使用这种技术来构建，但我要求未来的读者花时间阅读给出的其他答案并研究所有选项。 如果您找到更好的解决方案，请在此处发布您的答案。
我不确定它是否会对任何人有任何帮助，但我创建了this demo repository on GitHub，它使用我上面概述的技术显示了一个完整的（更复杂的设置）。
答案 1 :(得分：34)
我想出了自己的解决方案。还没有打磨，但我想我会朝那个方向前进。
在本质上，我正在使用grunt.template.process()从分析当前配置的模板生成index.html，并生成原始源文件的列表或指向具有缩小代码的单个文件的链接。下面的示例适用于js文件，但相同的方法可以扩展到css和任何其他可能的文本文件。
<强> grunt.js
/*global module:false*/
module.exports = function(grunt) {
var // js files
jsFiles = [
'src/module1.js',
'src/module2.js',
'src/module3.js',
'src/awesome.js'
];
// Import custom tasks (see index task below)
grunt.loadTasks( "build/tasks" );
// Project configuration.
grunt.initConfig({
pkg: '<json:package.json>',
meta: {
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */'
},
jsFiles: jsFiles,
// file name for concatenated js
concatJsFile: '<%= pkg.name %>-all.js',
// file name for concatenated & minified js
concatJsMinFile: '<%= pkg.name %>-all.min.js',
concat: {
dist: {
src: ['<banner:meta.banner>'].concat(jsFiles),
dest: 'dist/<%= concatJsFile %>'
}
},
min: {
dist: {
src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
dest: 'dist/<%= concatJsMinFile %>'
}
},
lint: {
files: ['grunt.js'].concat(jsFiles)
},
// options for index.html builder task
index: {
src: 'index.tmpl', // source template file
dest: 'index.html' // destination file (usually index.html)
}
});
// Development setup
grunt.registerTask('dev', 'Development build', function() {
// set some global flags that all tasks can access
grunt.config('isDebug', true);
grunt.config('isConcat', false);
grunt.config('isMin', false);
// run tasks
grunt.task.run('lint index');
});
// Production setup
grunt.registerTask('prod', 'Production build', function() {
// set some global flags that all tasks can access
grunt.config('isDebug', false);
grunt.config('isConcat', true);
grunt.config('isMin', true);
// run tasks
grunt.task.run('lint concat min index');
});
// Default task
grunt.registerTask('default', 'dev');
};
<强> index.js (the index task)
module.exports = function( grunt ) {
grunt.registerTask( "index", "Generate index.html depending on configuration", function() {
var conf = grunt.config('index'),
tmpl = grunt.file.read(conf.src);
grunt.file.write(conf.dest, grunt.template.process(tmpl));
grunt.log.writeln('Generated \'' + conf.dest + '\' from \'' + conf.src + '\'');
});
}
最后， index.tmpl ，生成逻辑在：
<doctype html>
<head>
<%
var jsFiles = grunt.config('jsFiles'),
isConcat = grunt.config('isConcat');
if(isConcat) {
print('<script type="text/javascript" src="' + grunt.config('concat.dist.dest') + '"></script>\n');
} else {
for(var i = 0, len = jsFiles.length; i < len; i++) {
print('<script type="text/javascript" src="' + jsFiles[i] + '"></script>\n');
}
}
%>
</head>
<html>
</html>
UPD。发现基于grunt的Yeoman有一个内置的usemin任务，可以与Yeoman的构建系统集成。它根据index.html的开发版本中的信息以及其他环境设置生成index.html的生产版本。看起来有点复杂但有趣。
答案 2 :(得分：15)
我不喜欢这里的解决方案（包括the one I previously gave），这就是原因：
我已经想出如何解决这两个问题。我已经设置了我的grunt任务，以便每次添加或删除文件时，都会自动生成脚本标记以反映这一点。这样，当你添加/删除/重命名你的JS文件时，你不需要修改你的html文件或你的grunt文件。
总结一下这是如何工作的，我有一个带有脚本标签变量的html模板。我使用https://github.com/alanshaw/grunt-include-replace来填充该变量。在开发模式下，该变量来自我所有JS文件的通配模式。当添加或删除JS文件时，监视任务会重新计算此值。
现在，要在dev或prod模式下获得不同的结果，只需使用不同的值填充该变量即可。这是一些代码：
var jsSrcFileArray = [
'src/main/scripts/app/js/Constants.js',
'src/main/scripts/app/js/Random.js',
'src/main/scripts/app/js/Vector.js',
'src/main/scripts/app/js/scripts.js',
'src/main/scripts/app/js/StatsData.js',
'src/main/scripts/app/js/Dialog.js',
'src/main/scripts/app/**/*.js',
'!src/main/scripts/app/js/AuditingReport.js'
];
var jsScriptTags = function (srcPattern, destPath) {
if (srcPattern === undefined) {
throw new Error("srcPattern undefined");
}
if (destPath === undefined) {
throw new Error("destPath undefined");
}
return grunt.util._.reduce(
grunt.file.expandMapping(srcPattern, destPath, {
filter: 'isFile',
flatten: true,
expand: true,
cwd: '.'
}),
function (sum, file) {
return sum + '\n<script src="' + file.dest + '" type="text/javascript"></script>';
},
''
);
};
...
grunt.initConfig({
includereplace: {
dev: {
options: {
globals: {
scriptsTags: '<%= jsScriptTags(jsSrcFileArray, "../../main/scripts/app/js")%>'
}
},
src: [
'src/**/html-template.html'
],
dest: 'src/main/generated/',
flatten: true,
cwd: '.',
expand: true
},
prod: {
options: {
globals: {
scriptsTags: '<script src="app.min.js" type="text/javascript"></script>'
}
},
src: [
'src/**/html-template.html'
],
dest: 'src/main/generatedprod/',
flatten: true,
cwd: '.',
expand: true
}
...
jsScriptTags: jsScriptTags
jsSrcFileArray是典型的grunt文件循环模式。 jsScriptTags获取jsSrcFileArray并将其与两侧的script标记连接在一起。 destPath是我想要在每个文件上的前缀。
这就是HTML的样子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Example</title>
</head>
<body>
@@scriptsTags
</body>
</html>
现在，正如您在配置中看到的那样，当我在script模式下运行时，我会将该变量的值生成为硬编码的prod标记。在开发模式下，此变量将扩展为如下值：
<script src="../../main/scripts/app/js/Constants.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Random.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Vector.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/StatsData.js" type="text/javascript"></script>
<script src="../../main/scripts/app/js/Dialog.js" type="text/javascript"></script>
如果您有任何疑问，请与我们联系。
PS：对于我想在每个客户端JS应用程序中执行的操作，这是一个疯狂的代码量。我希望有人可以把它变成一个可重用的插件。也许有一天我会。
答案 3 :(得分：13)
我一直在问自己同样的问题，我认为这个grunt插件可以配置为你想做的事情：https://npmjs.org/package/grunt-targethtml。它实现了依赖于grunt目标的条件html标记。
答案 4 :(得分：8)
我一直在寻找一个更简单，更直接的解决方案，所以我结合了这个问题的答案：
How to place if else block in gruntfile.js
并提出了以下简单步骤：
在您的index.html文件的Gruntfile.js的concat / copy块中使用以下逻辑：
concat: {
index: {
src : [ (function() {
if (grunt.option('Release')) {
return 'views/index-production.html';
} else {
return 'views/index-development.html';
}
}()) ],
dest: '<%= distdir %>/index.html',
...
},
...
},
运行'grunt --Release'选择index-production.html文件，并取消标志以获得开发版本。
没有新的插件可以添加或配置，也没有新的grunt任务。
答案 5 :(得分：5)
这个名为scriptlinker的grunt任务看起来像是一种在开发模式下添加脚本的简单方法。您可以先运行concat任务，然后以prod模式将其指向连接文件。
答案 6 :(得分：5)
grunt-dom-munger使用CSS选择器读取和操作HTML。防爆。从你的HTML中读取标签。删除节点，添加节点等。
您可以使用grunt-dom-munger读取您的index.html链接的所有JS文件，然后再次使用它们然后再次使用grunt-dom-munger修改index.html以仅链接缩小的JS < / p>
答案 7 :(得分：5)
我发现了一个名为grunt-dev-prod-switch的grunt插件。所有这一切都是基于你传递给grunt的--env选项注释掉它寻找的某些块（虽然它限制你开发，生产和测试）。
按照说明here进行设置后，您可以运行例如：
grunt serve --env=dev，它所做的只是注释掉由
<!-- env:test/prod -->
your code here
<!-- env:test/prod:end -->
它将取消注释由
包装的块 <!-- env:dev -->
your code here
<!-- env:dev:end -->
它也适用于javascript，我用它来设置正确的IP地址连接到我的后端API。这些块只是改为
/* env:dev */
your code here
/* env:dev:end */
在你的情况下，它会像这样简单：
<!DOCTYPE html>
<html>
<head>
<!-- env:dev -->
<script src="js/module1.js" />
<script src="js/module2.js" />
<script src="js/module3.js" />
...
<!-- env:dev:end -->
<!-- env:prod -->
<script src="js/MyApp-all.min.js" />
...
<!-- env:prod:end -->
</head>
<body></body>
</html>
答案 8 :(得分：4)
grunt-bake是一个非常棒的咕噜剧本，在这里很棒。我在JQM自动构建脚本中使用它。
https://github.com/imaginethepoet/autojqmphonegap
看看我的grunt.coffee文件：
bake:
resources:
files: "index.html":"resources/custom/components/base.html"
这会查看base.html中的所有文件并将它们吸入以创建index.html，这对于多页面应用程序（phonegap）来说非常棒。这允许更容易的开发，因为所有开发人员都不在一个长单页应用程序上工作（防止大量冲突签入）。相反，您可以分解页面并处理较小的代码块，并使用watch命令编译到整个页面。
Bake从base.html读取模板并在watch上注入组件html页面。
<!DOCTYPE html>
jQuery Mobile Demos
app.initialize（）;
<body>
<!--(bake /resources/custom/components/page1.html)-->
<!--(bake /resources/custom/components/page2.html)-->
<!--(bake /resources/custom/components/page3.html)-->
</body>
您可以更进一步，在页面中为“菜单”“弹出窗口”等添加注入，这样您就可以真正将页面分成更小的可管理组件。
答案 9 :(得分：4)
使用wiredep https://github.com/taptapship/wiredep和usemin https://github.com/yeoman/grunt-usemin的组合，让grunt负责这些任务。 Wiredep会一次添加一个脚本文件的依赖项，而usemin会将它们全部连接成一个文件进行生产。这可以通过一些HTML注释来完成。例如，当我运行bower install && grunt bowerInstall：
<!-- build:js /scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
答案 10 :(得分：2)
考虑processhtml。它允许定义多个＆＃34;目标＆＃34;用于构建。注释用于有条件地包含或排除HTML中的材料：
<!-- build:js:production js/app.js -->
...
<!-- /build -->
变为
<script src="js/app.js"></script>
它甚至声称做这样漂亮的东西（见the 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">
答案 11 :(得分：1)
这个答案不适合新手！
使用Jade模板...将变量传递给Jade模板是一个标准的用例
我正在使用grunt（grunt-contrib-jade），但你不必使用grunt。只需使用标准的npm jade模块。
如果使用grunt，那么你的gruntfile就像......
jade: {
options: {
// TODO - Define options here
},
dev: {
options: {
data: {
pageTitle: '<%= grunt.file.name %>',
homePage: '/app',
liveReloadServer: liveReloadServer,
cssGruntClassesForHtmlHead: 'grunt-' + '<%= grunt.task.current.target %>'
},
pretty: true
},
files: [
{
expand: true,
cwd: "src/app",
src: ["index.jade", "404.jade"],
dest: "lib/app",
ext: ".html"
},
{
expand: true,
flatten: true,
cwd: "src/app",
src: ["directives/partials/*.jade"],
dest: "lib/app/directives/partials",
ext: ".html"
}
]
}
},
我们现在可以在Jade模板中轻松访问grunt传递的数据。
就像Modernizr使用的方法一样，我根据传递的变量的值在HTML标记上设置CSS类，并根据CSS类是否存在可以使用JavaScript逻辑。
如果使用Angular，这很棒，因为你可以根据类是否存在来在页面中包含元素。
例如，如果该类存在，我可能会包含一个脚本......
（例如，我可能在开发中包含实时重新加载脚本但不包括在生产中）
<script ng-if="controller.isClassPresent()" src="//localhost:35729/livereload.js"></script>