我最近发现了这些Grunt v0.4.0兼容的任务:
grunt-preprocess
围绕npm模块预处理任务。
咕噜��
为将来的任务自动化环境配置的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比我个人需要的更健壮。
注意:我今天才发现上面列出的任务，所以我可能会错过一个功能和/或我的流程可能会改变。现在，我很喜欢咕噜预处理和咕噜env所提供的简单性和特性。：）
我不确定它是否会对任何人有任何帮助，但我已经在GitHub上创建了这个演示库，使用我上面概述的技术展示了一个完整的(和更复杂的设置)。
