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

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 实现标签refresh，用 rev 实现文件标签refresh，打包由'uglify','cssmin',等取制定细节各个部分分开相对独立，会方便很多。

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

java-er

发布了167 篇原创文章 · 获赞 321 · 访问量 58万+

他的留言板关注

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

猜你喜欢