使用grunt完成requirejs的合并壓縮和js檔案的版本控制

標籤：接下來   ejs   log   optimize   logs   als   markdown   ati   檔案中   

最近有一個項目使用了 requirejs 來解決前端的模組化，但是隨著頁面和模組的越來越多，我發現我快要hold不住這些可愛的js檔案了，具體表現在每個頁面都要設定一堆 requirejs 的配置( baseUrl ， paths 之類的)。

不知誰說過，一些事重複做了三次，就該考慮一下自動化了，於是我小心翼翼的掏出了我的 grunt 。

我們得使用 grunt-contrib-requirejs 這個外掛程式來實現如上所說的自動化功能，這個就是根據 r.js 封裝的 grunt 外掛程式。

 

安裝 grunt-contrib-requirejs

npm i --save-dev grunt-contrib-requirejs

 

配置 Grantfile

首先我們來看下項目目錄

src 是每個頁面的依賴檔案

modules 和 lib 是一些模組和庫

dist 是合并壓縮後的檔案

在 Gruntfile 中首先得到需要處理的檔案清單，並建立一個Null 物件，用來裝requirejs的配置

var files = grunt.file.expand(‘static/js/src/*.js‘);var requireOptions = {};

然後遍曆這個檔案清單數組，得到js檔案的名稱：

files.forEach(function (file) {    var filenamelist = file.split(‘/‘);    var num = filenamelist.length;    var filename = filenamelist[num - 1].replace(/\.js$/,‘‘);}

接下來為每個js檔案配置一個任務，任務名稱就是js的檔案名稱：

files.forEach(function (file) {    requireOptions[filename] = {        options: {            baseUrl: ‘static/js‘,            paths: {                jquery: ‘lib/jquery.min‘,                lrz: ‘lib/lrz.all.bundle‘,                zepto: ‘lib/zepto.min‘,                ajax: ‘modules/ajax‘,                validators: ‘modules/validators‘,                page: ‘modules/mixins/to_page‘,                dialog: ‘modules/mixins/toggle_login_dialog‘,            },            optimizeAllPluginResources: true,            name: ‘src/‘ + filename,            out: ‘static/js/dist/‘ + filename + ‘.js‘        }    };}

接著初始化 grunt 配置並載入並註冊任務

grunt.initConfig({    requirejs: requireOptions})grunt.loadNpmTasks(‘grunt-contrib-requirejs‘);grunt.registerTask(‘require‘, [‘requirejs‘]);

到這裡 requirejs 的配置部分就結束了，在命令列輸入 grunt require 就會看到 static/js/dist 目錄下面有東西蹦出來了，而且全部都是合并後並壓縮好的。

在html頁面中只需要：

<script src="static/js/require.js"></script><script src="static/js/dist/index.js"></script>

就能成功載入了。

 

增加js檔案的版本號碼

瀏覽器有時會對載入過的js或css進行緩衝，如果你的某些js依賴發生改變，那麼就可能發生錯誤，解決辦法是在檔案後面增加查詢字串，例如 a.js?v=dsd712sd

那麼如何控製版本，首先我們肯定想到用 new Date() ，但是如果每次發布都讓瀏覽器重新載入（儘管有些檔案根本就沒有改變），難免會造成浪費。正確的方案是根據檔案內容產生MD5值來作為版本號碼，這樣當檔案沒有改變時，hash就不會變。

那麼如何自動解決版本號碼的問題，我們可以用到 asset-cache-control 這個grunt外掛程式

首先安裝：

npm i --save-dev asset-cache-control

asset-cache-control 的用法個很簡單，只要設定一個源檔案，再設定html檔案的路徑就可以了

grunt.initConfig({    cache: {        demo: {            assetUrl: ‘js/demo.js‘,            tmp: [‘demo.html‘]        }    }})

注意的是：html檔案中需要引入 js/demo.js

<script src=‘js/demo.js‘></script>

然後載入和註冊 asset-cache-control 外掛程式

grunt.loadNpmTasks(‘asset-cache-control‘);grunt.registerTask(‘cache‘, [‘cache‘]);

接著在命令列敲 grunt cache 就會發現 index.html 中的 script 標籤加上了查詢字串。

<script src=‘js/demo.js?t=92e26c5d‘></script>

對每個js檔案配置 cache 的任務：

var files = grunt.file.expand(‘static/js/src/*.js‘);var cacheOptions ={};files.forEach(function (file) {    var filenamelist = file.split(‘/‘);    var num = filenamelist.length;    var filename = filenamelist[num - 1].replace(/\.js$/,‘‘);    cacheOptions[filename] = {        assetUrl: ‘static/js/dist/‘ + filename +‘.js‘,        files: {            ‘tmp‘: [filename+‘.php‘]        }    }});

 

檢測每個檔案的變化，自動執行任務

用到 grunt-contrib-watch 這個官方組件

在 grunt.initConfig 中配置：

watch: {    files: [‘static/js/src/*.js‘,‘static/js/modules/*.js‘],    tasks: [‘requirejs‘, ‘cache‘],    options: {        spawn: false    }}

這樣，當你修改 static/js/src/ 和 static/js/modules/ 下的所有js檔案時，就會執行 requirejs 和 cache 任務。

 

完整配置清單

module.exports = function (grunt) {    var files = grunt.file.expand(‘static/js/src/*.js‘);    var requireOptions = {};    var cacheOptions ={};    files.forEach(function (file) {        var filenamelist = file.split(‘/‘);        var num = filenamelist.length;        var filename = filenamelist[num - 1].replace(/\.js$/,‘‘);        requireOptions[filename] = {            options: {                baseUrl: ‘static/js‘,                paths: {                    jquery: ‘lib/jquery.min‘,                    lrz: ‘lib/lrz.all.bundle‘,                    zepto: ‘lib/zepto.min‘,                    ajax: ‘modules/ajax‘,                    validators: ‘modules/validators‘,                    page: ‘modules/mixins/to_page‘,                    dialog: ‘modules/mixins/toggle_login_dialog‘,                },                optimizeAllPluginResources: true,                name: ‘src/‘ + filename,                out: ‘static/js/dist/‘ + filename + ‘.js‘            }        };        cacheOptions[filename] = {            assetUrl: ‘static/js/dist/‘ + filename +‘.js‘,            files: {                ‘tmp‘: [filename+‘.php‘]            }        }    });    grunt.initConfig({        requirejs: requireOptions,        cache: cacheOptions,        watch: {            files: [‘static/js/src/*.js‘,‘static/js/modules/*.js‘],            tasks: [‘requirejs‘, ‘cache‘],            options: {                spawn: false            }        }    });    grunt.loadNpmTasks(‘asset-cache-control‘);     grunt.loadNpmTasks(‘grunt-contrib-requirejs‘);    grunt.loadNpmTasks(‘grunt-contrib-watch‘);    grunt.registerTask(‘require‘, [‘requirejs‘,‘cache‘])};

另外，瀏覽器載入一個大檔案比載入n個小檔案的效率要高很多，所以模組的合并對效能也有很大的提高。

使用grunt完成requirejs的合并壓縮和js檔案的版本控制