我正在尝试使用 Grunt 作为我的 webapp 的构建工具。
我想至少有两个设置:
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>
二、生产设置- 将我的脚本压缩并连接到一个文件中,
相应地使用 index.html:
<!DOCTYPE html> <html> <head> <script src="js/MyApp-all.min.js" /> </head> <body></body> </html>
问题是,我怎样才能让 grunt 使这些 index.html 取决于我运行时的grunt dev配置grunt prod?
grunt dev
grunt prod
或者,也许我正在朝错误的方向挖掘,并且总是更容易生成MyApp-all.min.js,但将我的所有脚本(连接)或从单独文件异步加载这些脚本的加载器脚本放入其中?
MyApp-all.min.js
你们是怎么做到的,伙计们?
以下是我的片段Gruntfile.js。
Gruntfile.js
环境设置:
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模板文件中(例如):
/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可以提供满足我需求的解决方案。现在,几个月后,我想有更多的选择可能比我在这里发布的更好。虽然我个人仍然在我的构建中使用并喜欢使用这种技术,但我要求未来的读者花时间阅读给出的其他答案并研究所有选项。如果您找到更好的解决方案,请在此处发布您的答案。
0.4.x
我不确定它是否会对任何人有任何帮助,但我已经在 GitHub 上创建了这个演示存储库,它使用我上面概述的技术显示了一个完整的(和更复杂的设置)。