grunt-contrib-uglify

本文將以一個DEMO來展示如何使用uglify外掛。

DEMO環境

package.json:

{
  "name": "grunt-demo",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

DEMO檔案結構：

其中js資料夾就是用來測試的，Gruntfile.js稍後介紹，其中a.js內容如下：

(function() {
    //output hello grunt
    var helloGrunt = "Hello Grunt!(From a.js)";
    console.log(helloGrunt);
})();

b.js內容如下：

(function() {
    //output hello world
    var helloWorld = "Hello World!(From b.js)";
    console.log(helloWorld);
})();
 

下面我們來配置四個任務：

• 壓縮a.js，不混淆變數名，保留註釋，新增banner和footer
• 壓縮b.js，輸出壓縮資訊
• 按原檔案結構壓縮js資料夾內所有JS檔案
• 合併壓縮a.js和b.js

Gruntfile.js

現在直接通過Gruntfile.js來看看這四個任務的配置：

module.exports = function(grunt){

    // 專案配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: 
 
'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'//新增banner
            },
            builda: {//任務一：壓縮a.js，不混淆變數名，保留註釋，新增banner和footer
                options: {
                    mangle: false, //不混淆變數名
                    preserveComments: 'all', //不刪除註釋，還可以為 false（刪除全部註釋），some（保留@preserve @license @cc_on等註釋）
                    footer:'\n/*! <%= pkg.name %> 最後修改於： <%= grunt.template.today("yyyy-mm-dd") %> */'//新增footer
                },
                files: {
                    'output/js/a.min.js': ['js/a.js']
                }
            },
            buildb:{//任務二：壓縮b.js，輸出壓縮資訊
                options: {
                    report: "min"//輸出壓縮率，可選的值有 false(不輸出資訊)，gzip
                },
                files: {
                    'output/js/b.min.js': ['js/main/b.js']
                }
            },
            buildall: {//任務三：按原檔案結構壓縮js資料夾內所有JS檔案
                files: [{
                    expand:true,
                    cwd:'js',//js目錄下
                    src:'**/*.js',//所有js檔案
                    dest: 'output/js'//輸出到此目錄下
                }]
            },
            release: {//任務四：合併壓縮a.js和b.js
                files: {
                    'output/js/index.min.js': ['js/a.js', 'js/main/b.js']
                }
            }
        }
    });

    // 載入提供"uglify"任務的外掛
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 預設任務
    grunt.registerTask('default', ['uglify:release']);
    grunt.registerTask('mina', ['uglify:builda']);
    grunt.registerTask('minb', ['uglify:buildb']);
    grunt.registerTask('minall', ['uglify:buildall']);
}

通過上面的程式碼，我們很容易就可以看到上面四個任務的配置方式。

執行結果

任務一：壓縮a.js，不混淆變數名，保留註釋，新增banner和footer

執行 grunt mina 命令，生成的a.min.js如下：

/*! grunt-demo 2013-11-29 */
!function(){//output hello grunt
var helloGrunt="Hello Grunt!(From a.js)";console.log(helloGrunt)}();
/*! grunt-demo 最後修改於： 2013-11-29 */

跟我們的目標一致。

任務二：壓縮b.js，輸出壓縮資訊

執行 grunt minb 命令，生成的b.min.js如下：

/*! grunt-demo 2013-11-29 */
!function(){var a="Hello World!(From b.js)";console.log(a)}();

命令執行情況：

我們可以看到輸出了壓縮資訊

任務三：按原檔案結構壓縮js資料夾內所有JS檔案

執行 grunt minall 命令，生成目錄結構如下：

其中a.min.js和b.min.js是任務一和任務二生成的，壓縮後的output/js/a.js內容如下：

/*! grunt-demo 2013-11-29 */
!function(){var a="Hello Grunt!(From a.js)";console.log(a)}();

output/js/main/b.js內容如下：

/*! grunt-demo 2013-11-29 */
!function(){var a="Hello World!(From b.js)";console.log(a)}();

任務四：合併壓縮a.js和b.js

執行 grunt命令，生成的output/index.min.js內容如下：

/*! grunt-demo 2013-11-29 */
!function(){var a="Hello Grunt!(From a.js)";console.log(a)}(),function(){var a="Hello World!(From b.js)";console.log(a)}();

至此，本節uglify外掛的介紹就結束了，對本文或使用過程中有任何問題，歡迎留言討論。