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的狀況下的考慮。若是文件比較小的話，這些徹底惋惜忽略的。（固然這樣仍然可使用，並且是個不錯的方法）

可能說的不是很清楚，大概是這個樣子～：）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。