grunt-rev 和grunt-usemin 的一些感悟

来源：互联网发布：qq飞车改车吧软件编辑：程序博客网时间：2024/05/17 05:16

https://github.com/cbas/grunt-rev

https://www.npmjs.org/package/grunt-usemin

这里有grunt-rev 和 grunt-usemin 的基本使用简介，但是这些已经不能满足我们的使用需求了

http://blog.segmentfault.com/jiyinyiyong/1190000000442070

grunt-rev 还是老样子，作用是把制定的文件或者文件夹里的文件名前加入 md5 字符串, 比如 css/app.css 被重命名为 css/ae35dd05.app.css

但是这时候模板里的标签还是没有替换的。

所以需要用到 grunt-usemin 用来替换模板里的链接为更改后的

模板文件的样子

<!DOCTYPE html><html>  <head>    <title>Usemin test</title>    <!-- build:css assets/css/style.min.css -->      <link rel="stylesheet" type="text/css" href="./assets/css/style.css" media="screen" />    <!-- endbuild -->  </head>  <body>  </body>  <!-- build:js assets/js/optimized.js -->    <script src="./assets/js/foo.js"></script>    <script src="./assets/js/bar.js"></script>  <!-- endbuild -->  </html>

配置文件的样子

module.exports = function(grunt) {    require('load-grunt-tasks')(grunt);    var sitepath = '/cp/';    grunt.config.init({  rev: {    options: {    algorithm: 'md5',    length: 8    },      assets: {        files: [{        src: [        'dist/assets/**/*.{css,jpg,jpeg,gif,png,js}'        ]           }]      }     },  useminPrepare: {      html: 'dist/index.html'  },  usemin: {      html: 'dist/index.html',      options: {        blockReplacements: {        css: function (block) {        return '<link rel="stylesheet" href="' + sitepath + block.dest + '">';        }        }     }  },  copy: {      html: {      src: './index.html', dest: 'dist/index.html'    }  },  uglify: {       stash: {       options: {       report: 'gzip'       }       }  },  cssmin: {       stash: {       options: {       report: 'gzip'         }       }  }    });    grunt.registerTask('default',[    'copy:html',    'useminPrepare',    'concat',    'uglify',    'cssmin',     'rev',    'usemin'    ]);}

但是基于这种思路的花会有很多问题

比如：'useminPrepare',这一步执行的时候会直接根据标签派发压缩任务（这样看起来好像是方便了，但是没办法定制打包的方式和细节，也没办法实现只压缩增量的形式）所以用的时候这一步被弃用。比如：替换的标签定义在usemin 没有配置 blockReplacements 字段的时候，更改的标签是很单一的。要想实现定制需要借助blockReplacements字段。这里采用的方式是

        usemin: {            html: 'layout.tpl.php',            options: {                blockReplacements: {                    css: function (block) {  var real_path = 'dist/www/' + block.dest;  var rev_code = hash(real_path);  var tmp = block.dest.split('/');  tmp[tmp.length-1] = rev_code + '.' + tmp[tmp.length-1];  var final_name = tmp.join('/');  final_name =  sitePath + final_name;  var media = block.media ? ' media="' + block.media + '"' : '';  return '<link rel="stylesheet" href="' + final_name + '"' + media + '>';//此处为css标签的定制                    },                    js: function (block) {  var real_path = 'dist/www/' + block.dest;  var rev_code = hash(real_path);  var tmp = block.dest.split('/');  tmp[tmp.length-1] = rev_code + '.' + tmp[tmp.length-1];  var final_name = tmp.join('/');  final_name =  sitePath + final_name;  var defer = block.defer ? 'defer ' : '';  var async = block.async ? 'async ' : '';  return '<script ' + defer + async + 'src="' + final_name + '"><\/script>';//次处为js标签的定制                    }                }            }        },

这个过程是直接找到相应文件算个md5 然后取前8位拼接到原来的文件名字上

这样的好处是在rev 这一步我们就只需重命名文件即可，因为同一个文件的md5 总是一致的、会变成大致如下步骤：

grunt.registerTask('default',[  'copy:html',  'concat',  'uglify',  'cssmin',  'usemin'，  'rev'    ]);

这样用 use-min 实现标签跟新，用 rev 实现文件标签跟新，打包由'uglify','cssmin',等取制定细节各个部分分开相对独立，会方便很多。

这个形式是在考虑到单个js 或者 css 文件压缩后还是100+ kb的情况下的考虑。如果文件比较小的话，这些完全可惜忽略的。（当然这样仍然可以使用，而且是个不错的方法）

可能说的不是很清楚，大概是这个样子～：）

0 0