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

时间 2019-11-10

标签 grunt rev usemin 一些感悟栏目 Node.js 繁體版

原文原文链接

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

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

这里有grunt-rev 和 grunt-usemin 的基本使用简介，可是这些已经不能知足咱们的使用需求了html

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

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

可是这时候模板里的标签仍是没有替换的。npm

因此须要用到 grunt-usemin 用来替换模板里的连接为更改后的segmentfault

模板文件的样子app

<!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>

配置文件的样子async

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'

    ]);

}

可是基于这种思路的花会有不少问题grunt

好比：'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的状况下的考虑。若是文件比较小的话，这些彻底惋惜忽略的。（固然这样仍然可使用，并且是个不错的方法）

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