grunt

簡介：
Grunt是一種自動化任務處理工具，它就是一個工具框架，有很多插件擴展它的功能。。

Grunt 基于 Node.js ，用 JS 開發，這樣就可以借助 Node.js 實現跨系統跨平臺的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件們，都作為一個 包 ，可以用 NPM 安裝進行管理。

所以 NPM 生成的 package.json 項目文件，里面可以記錄當前項目中用到的 Grunt 插件，而 Grunt 會調用 Gruntfile.js 這個文件，解析里面的任務（task）并執行相應操作。

安裝 Grunt

Grunt 依賴 Node.js 所以在安裝之前確保你安裝了 Node.js。然后開始安裝 Grunt。

實際上，安裝的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，這樣你就可以使用 grunt 命令來執行某個項目中的 Gruntfile.js 中定義的 task 。但是要注意，Grunt-cli 只是一個命令行工具，用來執行，而不是 Grunt 這個工具本身。

安裝 Grunt-cli 需要使用 NPM，使用下面一行即可在全局范圍安裝 Grunt-cli ，換句話說，就是你可以在任何地方執行 grunt 命令：

npm install -g grunt-cli

cli：利用node提供的requrie()系統查找本地安裝的grunt，如果到grunt，cli就會加載并傳遞gruntfile中的配置信息，然后執行任務

生成 package.json 文件

進入項目的目錄

npm init

{
  "name": "0717",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安裝 grunt

進入項目的目錄

npm install grunt --save-dev

“—save-dev”的意思是，在當前目錄安裝grunt的同時，順便把grunt保存為這個目錄的開發依賴項

此時看package.json文件：

{
  "name": "1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

所需要的插件

Grunt 幫忙實現下面幾個功能：檢查每個 JS 文件語法、合并兩個 JS 文件、將合并后的 JS 文件壓縮、將 SCSS 文件編譯、新建一個本地服務器監聽文件變動自動刷新 HTML 文件。需要用到：

• 合并文件：grunt-contrib-concat
• 語法檢查：grunt-contrib-jshint
• Scss 編譯：grunt-contrib-sass
• 壓縮文件：grunt-contrib-uglify
• 監聽文件變動：grunt-contrib-watch
• 建立本地服務器：grunt-contrib-connect

它們的命名和文檔都很規范，因為這些是官方提供的比較常用的插件。這些插件同時都是 NPM 管理的包，比如 grunt-contrib-concat - npm 你也可以在這上面看到用法等。

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

加上了 –save-dev 參數，表示會把剛安裝的東西添加到 package.json 文件中。

配置 Gruntfile.js 的語法

需要在項目根目錄下新建一個叫Gruntfile.js的文件。這是一個 JS 文件，你可以寫任意的 JS 代碼，比如聲明一個 對象 來存儲一會要寫任務的參數，或者是一個變量當作開關等等。

然后，所有的代碼要包裹在：

//包裝函數
module.exports = function(grunt) {
    //任務配置，所有插件的配置信息
    grunt.initConfig({
        //獲取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
    });
    //加載所用到的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //告訴grunt當我們在終端輸入grunt時需要做什么，有先后順序
    grunt.registerTask('default', ['uglify', 'concat','watch']);
}

• Contrib-jshint——javascript語法錯誤檢查；
• Contrib-watch——實時監控文件變化、調用相應的任務重新執行；
• Contrib-clean——清空文件、文件夾；
• Contrib-uglify——壓縮javascript代碼
• Contrib-copy——復制文件、文件夾
• Contrib-concat——合并多個文件的代碼到一個文件中
• karma——前端自動化測試工具

使用uglify插件（壓縮javascript代碼）

安裝：

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

Gruntfile.js

module.exports = function(grunt) {
    //任務配置，所有插件的配置信息
    grunt.initConfig({
        //獲取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! create by <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
            },
            build: {
                files: [{
                    src: 'js/index.js',
                    dest: 'build/index.min.js'
                }, {
                    src: 'js/index2.js',
                    dest: 'build/index2.min.js'
                }],
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //告訴grunt當我們在終端輸入grunt時需要做什么，有先后順序
    grunt.registerTask('default', ['uglify']);
}

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

“build”中配置了源文件和目標文件。即規定了要壓縮誰？壓縮之后會生成誰？

（PS：上文中說過的package.json的內容終于找到了他被應用的地方了。這樣的好處是：例如，對文件版本的管理，你只需要在package.json中修改即可，grunt會自動根據最新的版本號生成相應版本的文件。你不用手動去修改文件的文件名。）

運行：

grunt

會發現，在build文件夾下已經多了index.min.js和index2.min.js兩個文件。

Javascript使用uglify壓縮，css可使用cssmin插件壓縮。安裝、配置方法一樣的。

使用jshint插件（檢查javascript語法錯誤）

安裝：

npm install grunt-contrib-jshint --save-dev

module.exports = function(grunt) {
    //任務配置，所有插件的配置信息
    grunt.initConfig({
        //獲取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
         jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            build: ['Gruntfile.js','js/index.js','js/index2.js']
        },
    });
    grunt.loadNpmTasks('grunt-contrib-jshint');

    //告訴grunt當我們在終端輸入grunt時需要做什么，有先后順序
    grunt.registerTask('default', ['jshint']);
}

和uglify的配置一樣，分為“options”和“build”兩個部分。“build”中描述了jshint要檢查哪些js文檔的語法。 “options”中描述了要通過怎么的規則檢查語法，這些規則的描述文件就保存在網站根目錄下的一個叫做“.jshintrc”的文件中。

{
    "browser":true,//暴露瀏覽器屬性的全局變量，列如 window,document;注意:這個選項不暴露變量 alert或 console。
    "boss":true,//禁止比較表達式的值沒有達到預期警告。
    "curly": true,//循環或者條件語句必須使用花括號包圍。這個選項需要你總是把花括號在塊循環和條件。
    "devel":true //這個選項定義了全局變量,通常用于日志調試: console, alert等等
}

使用watch插件（真正實現自動化）

安裝：

npm install grunt-contrib-watch --save-dev

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! create by <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
            },
            build: {
                files: [{
                    src: 'js/index.js',
                    dest: 'build/index.min.js'
                }, {
                    src: 'js/index2.js',
                    dest: 'build/index2.min.js'
                }],
            }
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            build: ['Gruntfile.js','js/index.js','js/index2.js']
        },
        concat: {
            bar: {
                src: ['build/*.js'],
                dest: 'dest/all.min.js'
            },
        },
        watch: {
            files: ["js/*index.js"],
            tasks: ['uglify']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify')
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.registerTask('default', ['jshint','uglify', 'watch']);
};