前端自動(dòng)化工具 grunt 插件 uglify 的簡(jiǎn)單使用（一）

Grunt 的簡(jiǎn)介：

            Grunt 是一套前端自動(dòng)化工具，是一個(gè)基于 node.js 的命令行工具，它一般用于：

                    1、壓縮文件；

                    2、合并文件；

                    3、簡(jiǎn)單的語(yǔ)法檢測(cè)；

                    4、監(jiān)聽(tīng)文件變動(dòng)；

                    5、less 編譯；

PS：Grunt 官網(wǎng) （https://gruntjs.com/）。Grunt  就像是一個(gè)工具箱，擁有非常豐富的任務(wù)插件，可以幫助開(kāi)發(fā)人員實(shí)現(xiàn)各種各樣目標(biāo)任務(wù)的構(gòu)建。在Grunt工具箱中，按目標(biāo)任務(wù)類型我們可以分為：

                    1、編譯文檔型：比如編譯 Less、Sass、Stylus、Coffeescript 等等；

                    2、文件操作型：比如說(shuō)合并、壓縮 JavaScript、CSS、圖片 等等；

                    3、質(zhì)量保障型：比如說(shuō) JSHint、Jasmin、Mocha 等等；

                    4、類庫(kù)構(gòu)建型：比如說(shuō) Backbone.js、ember.js、angular.js 等等；

            這些任務(wù)都依賴于 Grunt 提供的插件來(lái)完成的，但很多工作依舊需要在命令行終端下輸入命令來(lái)完成這些操作。為此在Grunt中可以使用 watch 任務(wù)來(lái)實(shí)現(xiàn)監(jiān)聽(tīng)文件的改變、自動(dòng)觸發(fā)構(gòu)建目標(biāo)任務(wù)等功能。從而避免人工每次手動(dòng)去操作任務(wù)。

一，安裝 node.js 和 npm（Grunt 和 Grunt 插件是通過(guò) npm 安裝并管理的，npm 是 node.js 的包管理器）

1、node.js 下載地址

            http://www.nodejs.org/download/

2、安裝完成后，可通過(guò)命令行更新 npm 版本，保證是最新的

            npm  update npm  -g

PS：安裝好 node.js 之后，可以在你的終端中輸入“node -v”命令來(lái)查看 node.js 的版本，也順便檢測(cè) node.js 是否安裝成功。 還需要注意的兩點(diǎn)：第一，Grunt 依賴于 node.js 的 0.8.0及以上版本；第二，奇數(shù)版本號(hào)的版本被認(rèn)為是不穩(wěn)定的開(kāi)發(fā)版，不過(guò)從官網(wǎng)上下載下來(lái)的應(yīng)該都是偶數(shù)的穩(wěn)定版。

二、grunt-cli 環(huán)境安裝

1、grunt-cli 安裝命令（終端輸入）

            npm  install  -g  grunt-cli 

PS：Grunt 的運(yùn)行工具有兩個(gè)版本，一個(gè)是服務(wù)器端版本（grunt），另一個(gè)是客戶端版本(grunt-cli)。而我們?cè)陧?xiàng)目中需要安裝的是客戶端版本。grunt-cli 是 客戶端版本 Grunt  的命令行接口。我們將 Grunt 的命令行（CLI）安裝到系統(tǒng)的全局環(huán)境變量中，安裝完成后就可以在任何目錄下執(zhí)行 grunt 命令了。

            注意：安裝 grunt-cli 并不等同于安裝了 Grunt。grunt-cli 的任務(wù)很簡(jiǎn)單：調(diào)用與Gruntfile.js 文件在同一目錄下的 Grunt。

三、grunt 的安裝

1、在終端下通過(guò)命令進(jìn)入到項(xiàng)目的根目錄下

2、提供 package.json 配置文件（package.json 文件用于保存項(xiàng)目元數(shù)據(jù)）

{
      "name": "demo",                
      "file": "zepto",                    
      "version": "1.1.0",               
      "description": "demo",       
      "devDependencies": {
            "grunt": "~0.4.1",                               
            "grunt-contrib-jshint": "~0.6.3",       
            "grunt-contrib-uglify": "~0.2.1",       
            "grunt-contrib-concat": "~0.2.1",     
            "grunt-contrib-requirejs": "~0.4.1",  
            "grunt-contrib-clean": "~0.5.0"        
      }
}

PS：package.json 是我們 Grunt 項(xiàng)目的核心配置文件，用于設(shè)置將要執(zhí)行操作的項(xiàng)目名稱，版本，描述，依賴等信息，其格式為 json 數(shù)據(jù)格式。package.json 文件是每個(gè)Grunt 項(xiàng)目必備的文件，因此首要條件需要先創(chuàng)建這個(gè)文件。創(chuàng)建package.json文件方式有很多種：

                    1、根據(jù)“grunt-init”模板自動(dòng)創(chuàng)建一個(gè)特定的 package.json 文件；

                    2、在終端通過(guò)“npm init”命令自動(dòng)創(chuàng)建一個(gè)基本的 package.json 文件；

                    3、從官網(wǎng)上復(fù)制或者下載一個(gè) package.json 文件；

                    4、手工創(chuàng)建一個(gè) package.json 文件；

3、執(zhí)行“npm install”命令安裝 Grunt 項(xiàng)目依賴的插件（安裝成功后會(huì)在項(xiàng)目根目錄下的  node_modules 文件夾里）

4、在配置好 package.json 文件后也可以使用命令安裝 Grunt 項(xiàng)目依賴的插件（package.json 文件會(huì)自動(dòng)更新）

        npm install grunt --save-dev

PS：這種安裝一律是如下形式： npm install <module> –save-dev，不僅會(huì)安裝指定的 <module> 插件，還會(huì)將插件信息自動(dòng)添加到  package.json 文件的 devDependencies 區(qū)域中，且包括插件名稱，版本范圍。

四、Gruntfile.js  文件的配置（package.json 和 Gruntfile.js 文件都要放置到項(xiàng)目的根目錄下）

1、提供 Gruntfile.js 配置文件

// 包裝函數(shù)
module.exports = function (grunt) { 
        // 任務(wù)配置,所有插件的配置信息
        grunt.initConfig({
                // 獲取 package.json 的信息
                pkg: grunt.file.readJSON('package.json'),
                // uglify 插件的配置信息
                uglify: {
                    // 文件頭部輸出信息
                    options: {
                        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                    },
                    // 具體任務(wù)配置
                    build: {
                        // 源文件
                        src: 'src/<%= pkg.file %>.js',
                        // 目標(biāo)文件
                        dest: 'dest/<%= pkg.file %>.min.js'
                    }
                }
        });  
// 加載指定插件任務(wù)
grunt.loadNpmTasks('grunt-contrib-uglify');  

// 默認(rèn)執(zhí)行的任務(wù)
grunt.registerTask('default', ['uglify']);
};

2、Gruntfile.js 文件內(nèi)容一般由四個(gè)部分組成

            1、包裝函數(shù)（Gruntfile.js 文件的基本格式，意思就是我們所有的代碼必須放到這個(gè)函數(shù)里面）

module.exports = function (grunt) {
        // Do grunt-related things in here
};

            2、項(xiàng)目和任務(wù)配置

                    我們?cè)?Gruntfile.js 文件中一般第一個(gè)用到的就是 initConfig 方法配置項(xiàng)目和任務(wù)

// Project configuration.
grunt.initConfig({  
         // 獲取 package.json 的信息
         pkg: grunt.file.readJSON('package.json'),
         // uglify 插件的配置信息
         uglify: {
             // 文件頭部輸出信息
             options: {
                 banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
             },
             // 具體任務(wù)配置
             build: {
                 // 源文件
                 src: 'src/<%= pkg.file %>.js',
                 // 目標(biāo)文件
                 dest: 'dest/<%= pkg.file %>.min.js'
             }
         }
});  

            3、加載  Grunt 插件和任務(wù)

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

            4、自定義任務(wù)

// Default task(s).
grunt.registerTask('default', ['uglify']);

PS：Gruntfile.js 文件一般干兩件事：第一，讀取 package.json  的內(nèi)容；第二，進(jìn)行插件加載，注冊(cè)任務(wù)，運(yùn)行任務(wù)（Grunt 對(duì)外的接口全部寫(xiě)在這里面）。

五、Grunt 常用插件介紹

            Grunt 官網(wǎng)的插件列表頁(yè)面（https://gruntjs.com/plugins ）。插件一般分為兩類，第一類是 grunt 團(tuán)隊(duì)貢獻(xiàn)的插件，這些插件的名字前面都帶有“contrib-”前綴，而且在插件列表中有星號(hào)標(biāo)注；第二類是第三方提供的插件，不帶有這兩個(gè)特征。

contrib-watch —— 實(shí)時(shí)監(jiān)控文件變化、調(diào)用相應(yīng)的任務(wù)重新執(zhí)行； 
contrib-uglify —— 壓縮 javascript，css 代碼； 
contrib-concat —— 合并多個(gè)文件的代碼到一個(gè)文件中；
contrib-jshint —— JavaScript 語(yǔ)法錯(cuò)誤檢查；
contrib-htmlmin —— 壓縮 html 代碼；
contrib-p_w_picpathmin —— 圖片壓縮；
contrib-requirejs —— require.js 合并管理插件；
contrib-clean —— 清空文件、文件夾； 
contrib-copy —— 復(fù)制文件、文件夾；
contrib-less —— less 編譯；
karma —— 前端自動(dòng)化測(cè)試工具；

PS：以上這些插件，本文不會(huì)全部講到。但是隨著講解其中的一部分，我想你就能掌握使用 grunt 插件的方法。知道方法了，然后你就可以參考官方文檔去使用你想要的插件。

六、contrib-uglify 插件的使用

1、安裝 “grunt-contrib-uglify”插件命令（在終端進(jìn)入到項(xiàng)目根目錄執(zhí)行）

            npm install grunt-contrib-uglify --save-dev

2、在項(xiàng)目根目錄下提供 uglify 插件配置需要的 src 目錄和需要被壓縮的源文件（壓縮源文件放置到 src 目錄下）

            mkdir src

3、在 Gruntfile.js 文件中對(duì) uglify 任務(wù)進(jìn)行配置（壓縮單個(gè)文件）

 // 包裝函數(shù)
module.exports = function (grunt) { 
        // 任務(wù)配置,所有插件的配置信息
        grunt.initConfig({
                // 獲取 package.json 的信息
                pkg: grunt.file.readJSON('package.json'),
                // uglify 插件的配置信息
                uglify: {
                    // 文件頭部輸出信息
                    options: {
                        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                    },
                    // 具體任務(wù)配置
                    build: {
                        // 源文件
                        src: 'src/<%= pkg.file %>.js',
                        // 目標(biāo)文件
                        dest: 'dest/<%= pkg.file %>.min.js'
                    }
                }
        });  
// 加載指定插件任務(wù)
grunt.loadNpmTasks('grunt-contrib-uglify');  

// 默認(rèn)執(zhí)行的任務(wù)
grunt.registerTask('default', ['uglify']);
};

4、uglify 任務(wù)也可以這樣配置（壓縮合并多個(gè)文件）

 // 包裝函數(shù)
module.exports = function (grunt) { 
        // 任務(wù)配置,所有插件的配置信息
        grunt.initConfig({
                // 獲取 package.json 的信息
                pkg: grunt.file.readJSON('package.json'),
                // uglify 插件的配置信息
                uglify: {
                    // 文件頭部輸出信息
                    options: {
                        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                    },
                    // 具體任務(wù)配置
                    build: {
                        files: {
                                'dest/libs.min.js': ['src/jquery.js','src/zepto.js']    //這里是主要修改的地方
                        }
                    }
                }
        });  
// 加載指定插件任務(wù)
grunt.loadNpmTasks('grunt-contrib-uglify');  

// 默認(rèn)執(zhí)行的任務(wù)
grunt.registerTask('default', ['uglify']);
};

PS：<%= pkg.file %> 值為 package.json 文件中 “file”的屬性值。

            uglify 插件的配置有兩項(xiàng)：

                    “options”中規(guī)定允許生成的壓縮文件中帶 banner，即在生成的壓縮文件第一行加一句話說(shuō)明。注意，其中使用到了 pkg 獲取 package.json 的內(nèi)容。

                    “build”中配置了源文件和目標(biāo)文件的文件名。即規(guī)定了要壓縮誰(shuí)？壓縮之后會(huì)生成誰(shuí)？注意，我們這里將源文件和目標(biāo)文件的文件名通過(guò) pkg 的 file 來(lái)命名。

5、最后在終端運(yùn)行 grunt 命令

PS：如果提示 "Done, without errors."  證明就沒(méi)什么問(wèn)題了，現(xiàn)在去項(xiàng)目根目錄下看是否已經(jīng)生成了存放壓縮文件的目錄和壓縮的目標(biāo)文件。

6、在 Gruntfile.js 文件中對(duì) uglify 任務(wù)進(jìn)行配置（壓縮一個(gè)文件夾下的所有指定文件）

 // 包裝函數(shù)
module.exports = function (grunt) { 
        // 任務(wù)配置,所有插件的配置信息
        grunt.initConfig({  
                // 獲取 package.json 的信息
                pkg: grunt.file.readJSON('package.json'),
                // uglify 插件的配置信息
                uglify: {
                    // 文件頭部輸出信息
                    options: {
                        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
                    },
                    // 具體任務(wù)配置
                    build: {
                        files: [{
                            expand: true,
                            cwd: 'src',
                            src: '**/*.js',
                            dest: 'dest'
                        }]
                    }
                }
        });        
// 加載指定插件任務(wù)
grunt.loadNpmTasks('grunt-contrib-uglify');  

// 默認(rèn)執(zhí)行的任務(wù)
grunt.registerTask('default', ['uglify']);
};

PS：這段代碼非常有意思，它會(huì)將一個(gè)文件目錄里面的所有 js 文件打包到另一個(gè)文件夾中。