grunt-usemin:
Replaces references to non-optimized scripts or stylesheets into a set of HTML files
usemin
exports
2 different tasks:
useminPrepare
prepares the
configuration to transform specific construction (blocks) in the scrutinized
file into a single line, targeting an optimized version of the
files
usemin
replaces the blocks
by the file they reference, and replaces all references to assets by their
revisioned version if it is found on the disk. This target modifies the files
it is working on.
Usually, useminPrepare
is
launched first, then the steps of the transformation flow (for
example, concat
, uglify
,
and cssmin
), and then, in the
end usemin
is launched.
workspace/
——app/
——js/
——tpl/
1 module.exports = function(grunt) { 2 3 // Project configuration. 4 grunt.initConfig({ 5 6 useminPrepare: { 7 html: [‘app/tpl/**/*.html‘], 8 options: { 9 // 测试发现这里指定的dest,是usemin引入资源的相对路径的开始 10 // 在usemin中设置assetsDirs,不是指定的相对路径 11 // List of directories where we should start to look for revved version of the assets referenced in the currently looked at file 12 dest: ‘build/tpl‘ // string type 13 } 14 }, 15 usemin: { 16 html: [‘build/tpl/**/*.html‘], // 注意此处是build/ 17 options: { 18 assetsDirs: [‘build/js‘] 19 } 20 }, 21 copy: { 22 html: { 23 expand: true, // 需要该参数 24 cwd: ‘app/‘, 25 src: [‘tpl/**/*.html‘], // 会把tpl文件夹+文件复制过去 26 dest: ‘build‘ 27 } 28 } 29 30 }); 31 32 grunt.loadNpmTasks(‘grunt-contrib-uglify‘); 33 grunt.loadNpmTasks(‘grunt-contrib-copy‘); 34 grunt.loadNpmTasks(‘grunt-contrib-concat‘); 35 grunt.loadNpmTasks(‘grunt-usemin‘); 36 37 // 最后就是顺序了,没错concat,uglify在这里哦! 38 grunt.registerTask(‘default‘, [ 39 ‘copy:html‘, 40 ‘useminPrepare‘, 41 ‘concat:generated‘, 42 ‘uglify:generated‘, 43 ‘usemin‘ 44 ]); 45 46 };
感谢gruntjs,yeoman
https://github.com/yeoman/grunt-usemin
Gruntjs: grunt-usemin使用心得,布布扣,bubuko.com
原文:http://www.cnblogs.com/mackxu/p/grunt-usemin.html