Grunt 認識

基本工做流：

JS合併、JS壓縮、CSS壓縮、CSS Sprite、圖片優化、測試、靜態資源緩存（版本更新）...

基於工做流產生的工具：

JSHint（jshint.com）、CSSLint（csslint.net）、jade（jade.tilab.com）、coffeeScript（coffee-script.org/）、requireJs/seaJs、compass/less/sass ...

Grunt就是解決各類工具組合而造成系統工做流的解決方案

安裝

nodeJs --> npm --> grunt --> package.json --> 安裝插件Grunt相關插件 --> Gruntfile.js

nodeJs : 可以使用homeBrew安裝，也能夠官網安裝 brew install node(附帶npm)

grunt : npm install -g grunt-cli(卸載：npm uninstall grunt)

package.json : 用於nodeJs包管理（好比grunt插件安裝管理） npm init 開始填寫項目名稱、版本號、git信息、做者等信息

安裝grunt相關插件 : 合併文件(grunt-contrib-contact)、語法檢查(grunt-contrib-jshint)、Sass編譯(grunt-contrib-sass)、壓縮js文件(grunt-contrib-uglify)、監聽文件變化(grunt-contrib-watch)、創建本地服務器(grunt-contrib-connect)

安裝grunt到項目命令 : npm install grunt --save-dev(npm install grunt表示安裝到當前項目，--save-dev表示安裝grunt信息添加至package.json中，在package.json顯示爲"devDenpendencies" : {"grunt" : "^1.0.0"}表示當前項目依賴grunt，版本爲1.0.0)

安裝grunt相關插件到項目命令 : npm install --save-dev grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect表示把相關插件到項目中，一個插件對應一個任務

配置

Gruntfile.js : 配置Gruntfile.js，寫入任務

任務：Mulit Tasks( grunt.initConfig({key : value})  ) 和 Baisc Tasks

配置Gruntfile.js語法 : 全部的代碼包裹在 module.exports = function (grunt) { ... };裏面的代碼主要分爲：任務配置（也可沒必要要，好比Baisc Tasks）、插件加載、任務註冊。實現：用grunt註冊一個任務從而更具根據任務配置調用加載的插件來執行相應的操做

Mulit Tasks : 有所謂的target 且每一個Mulit Task都必須有一個task 如 : grunt.initConfig({concat : {foo : { ... }, bar : { ... }}, uglify : {bar : {}}})  concat任務有foo和bar兩個target,而uglify只有一個target，target名字能夠更換（可是任務的名稱是固定的，好比concat對應相關的插件），如今運行grunt concat:foo或grunt concat:bar分別表示運行foo或bar指定的的concat任務 只運行grunt concat將會遍歷concat的targets按順序運行

Baisc Tasks : 直接註冊任務 grunt.register(taskName,taskFunction) 如 : grunt.register("foo", function (arg1, arg2) { ... }) 運行grunt foo 或者 grunt foo:a:b a和b是傳遞給foo的參數

任務配置 : 調用插件配置要執行的任務和實現的功能

Baisc Tasks : 不須要任務配置

插件加載 : 加載所需的插件 grunt.loadNpmTasks()

任務註冊 : 註冊一個任務，包含以前的任務配置代碼 grunt.registerTasks()