前端自動化工具 grunt 插件 uglify 的簡單使用（一）

Grunt 的簡介：

            Grunt 是一套前端自動化工具，是一個基于 node.js 的命令行工具，它一般用于：

                    1、壓縮文件；

                    2、合并文件；

                    3、簡單的語法檢測；

                    4、監聽文件變動；

                    5、less 編譯；

PS：Grunt 官網 （https://gruntjs.com/）。Grunt  就像是一個工具箱，擁有非常豐富的任務插件，可以幫助開發人員實現各種各樣目標任務的構建。在Grunt工具箱中，按目標任務類型我們可以分為：

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

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

                    3、質量保障型：比如說 JSHint、Jasmin、Mocha 等等；

                    4、類庫構建型：比如說 Backbone.js、ember.js、angular.js 等等；

            這些任務都依賴于 Grunt 提供的插件來完成的，但很多工作依舊需要在命令行終端下輸入命令來完成這些操作。為此在Grunt中可以使用 watch 任務來實現監聽文件的改變、自動觸發構建目標任務等功能。從而避免人工每次手動去操作任務。

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

1、node.js 下載地址

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

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

            npm  update npm  -g

PS：安裝好 node.js 之后，可以在你的終端中輸入“node -v”命令來查看 node.js 的版本，也順便檢測 node.js 是否安裝成功。 還需要注意的兩點：第一，Grunt 依賴于 node.js 的 0.8.0及以上版本；第二，奇數版本號的版本被認為是不穩定的開發版，不過從官網上下載下來的應該都是偶數的穩定版。

二、grunt-cli 環境安裝

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

            npm  install  -g  grunt-cli 

PS：Grunt 的運行工具有兩個版本，一個是服務器端版本（grunt），另一個是客戶端版本(grunt-cli)。而我們在項目中需要安裝的是客戶端版本。grunt-cli 是 客戶端版本 Grunt  的命令行接口。我們將 Grunt 的命令行（CLI）安裝到系統的全局環境變量中，安裝完成后就可以在任何目錄下執行 grunt 命令了。

            注意：安裝 grunt-cli 并不等同于安裝了 Grunt。grunt-cli 的任務很簡單：調用與Gruntfile.js 文件在同一目錄下的 Grunt。

三、grunt 的安裝

1、在終端下通過命令進入到項目的根目錄下

2、提供 package.json 配置文件（package.json 文件用于保存項目元數據）

{
      "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 項目的核心配置文件，用于設置將要執行操作的項目名稱，版本，描述，依賴等信息，其格式為 json 數據格式。package.json 文件是每個Grunt 項目必備的文件，因此首要條件需要先創建這個文件。創建package.json文件方式有很多種：

                    1、根據“grunt-init”模板自動創建一個特定的 package.json 文件；

                    2、在終端通過“npm init”命令自動創建一個基本的 package.json 文件；

                    3、從官網上復制或者下載一個 package.json 文件；

                    4、手工創建一個 package.json 文件；

3、執行“npm install”命令安裝 Grunt 項目依賴的插件（安裝成功后會在項目根目錄下的  node_modules 文件夾里）

4、在配置好 package.json 文件后也可以使用命令安裝 Grunt 項目依賴的插件（package.json 文件會自動更新）

        npm install grunt --save-dev

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

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

1、提供 Gruntfile.js 配置文件

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

// 默認執行的任務
grunt.registerTask('default', ['uglify']);
};

2、Gruntfile.js 文件內容一般由四個部分組成

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

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

            2、項目和任務配置

                    我們在 Gruntfile.js 文件中一般第一個用到的就是 initConfig 方法配置項目和任務

// 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'
             },
             // 具體任務配置
             build: {
                 // 源文件
                 src: 'src/<%= pkg.file %>.js',
                 // 目標文件
                 dest: 'dest/<%= pkg.file %>.min.js'
             }
         }
});  

            3、加載  Grunt 插件和任務

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

            4、自定義任務

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

PS：Gruntfile.js 文件一般干兩件事：第一，讀取 package.json  的內容；第二，進行插件加載，注冊任務，運行任務（Grunt 對外的接口全部寫在這里面）。

五、Grunt 常用插件介紹

            Grunt 官網的插件列表頁面（https://gruntjs.com/plugins ）。插件一般分為兩類，第一類是 grunt 團隊貢獻的插件，這些插件的名字前面都帶有“contrib-”前綴，而且在插件列表中有星號標注；第二類是第三方提供的插件，不帶有這兩個特征。

contrib-watch —— 實時監控文件變化、調用相應的任務重新執行； 
contrib-uglify —— 壓縮 javascript，css 代碼； 
contrib-concat —— 合并多個文件的代碼到一個文件中；
contrib-jshint —— JavaScript 語法錯誤檢查；
contrib-htmlmin —— 壓縮 html 代碼；
contrib-p_w_picpathmin —— 圖片壓縮；
contrib-requirejs —— require.js 合并管理插件；
contrib-clean —— 清空文件、文件夾； 
contrib-copy —— 復制文件、文件夾；
contrib-less —— less 編譯；
karma —— 前端自動化測試工具；

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

六、contrib-uglify 插件的使用

1、安裝 “grunt-contrib-uglify”插件命令（在終端進入到項目根目錄執行）

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

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

            mkdir src

3、在 Gruntfile.js 文件中對 uglify 任務進行配置（壓縮單個文件）

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

// 默認執行的任務
grunt.registerTask('default', ['uglify']);
};

4、uglify 任務也可以這樣配置（壓縮合并多個文件）

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

// 默認執行的任務
grunt.registerTask('default', ['uglify']);
};

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

            uglify 插件的配置有兩項：

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

                    “build”中配置了源文件和目標文件的文件名。即規定了要壓縮誰？壓縮之后會生成誰？注意，我們這里將源文件和目標文件的文件名通過 pkg 的 file 來命名。

5、最后在終端運行 grunt 命令

PS：如果提示 "Done, without errors."  證明就沒什么問題了，現在去項目根目錄下看是否已經生成了存放壓縮文件的目錄和壓縮的目標文件。

6、在 Gruntfile.js 文件中對 uglify 任務進行配置（壓縮一個文件夾下的所有指定文件）

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

// 默認執行的任務
grunt.registerTask('default', ['uglify']);
};

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