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

最新推荐文章于 2024-05-09 09:36:59 发布

dakang

最新推荐文章于 2024-05-09 09:36:59 发布

阅读量776

点赞数 1

分类专栏： Grunt,Gulp,Webpack

Grunt,Gulp,Webpack 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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的情况下的考虑。如果文件比较小的话，这些完全可惜忽略的。（当然这样仍然可以使用，而且是个不错的方法）

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

dakang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
grunt-rev 和grunt-usemin 的一些感悟

https://github.com/cbas/grunt-revhttps://www.npmjs.org/package/grunt-usemin这里有grunt-rev 和 grunt-usemin 的基本使用简介，但是这些已经不能满足我们的使用需求了http://blog.segmentfault.com/jiyinyiyong/1190000000442070
复制链接

扫一扫

专栏目录