在前端工程化系列[02]-Grunt構(gòu)建工具的基本使用這篇文章中，已經(jīng)對(duì)Grunt做了簡(jiǎn)單的介紹轰坊，此外铸董，我們還知道了該如何來(lái)安裝Grunt環(huán)境，以及使用一些常見(jiàn)的插件了肴沫，這篇文章主要介紹Grunt的核心組件和運(yùn)轉(zhuǎn)機(jī)制袒炉。
Grunt是一套前端自動(dòng)化構(gòu)建工具，可以幫助我們簡(jiǎn)化開(kāi)發(fā)中需要反復(fù)處理的任務(wù)樊零，甚至可以實(shí)現(xiàn)自動(dòng)構(gòu)建等功能我磁。
Grunt擁有數(shù)量龐大的插件病游，這些插件能夠幫助我們處理開(kāi)發(fā)中遇到的絕大多數(shù)構(gòu)建任務(wù)邮旷，比如代碼的預(yù)編譯陪拘、壓縮犹芹、代碼檢查瞭吃、單元測(cè)試等菜谣。但為什么在終端輸入Grunt相關(guān)命令桅打，就能夠執(zhí)行對(duì)應(yīng)的任務(wù)页徐，Grunt到底是怎么運(yùn)轉(zhuǎn)的豌习？這些知識(shí)對(duì)于深入研究Grunt非常重要,下面我們從Grunt運(yùn)轉(zhuǎn)的組件和運(yùn)轉(zhuǎn)機(jī)制兩方面來(lái)展開(kāi)討論存谎。
2.1 Grunt的核心組件
node和npm
Grunt項(xiàng)目基于Node.js，Grunt和相關(guān)的插件都通過(guò) npm 安裝并管理肥隆。
Grunt-cli
Grunt命令行用于調(diào)用與Gruntfile文件在同一目錄中的 Grunt模塊既荚，通過(guò)-g參數(shù)把Grunt命令行安裝到全局環(huán)境中，這樣的話在所有文件目錄中都可以調(diào)用grunt相關(guān)的命令栋艳。
在命令行中運(yùn)行Grunt 相關(guān)命令時(shí)(比如 $grunt default)恰聘，內(nèi)部會(huì)根據(jù)node提供的require系統(tǒng)查找來(lái)當(dāng)前目錄中安裝的 Grunt，如果找到那么加載吸占，并把加載的grunt作為參數(shù)傳遞到Gruntfile文件中晴叨，然后執(zhí)行指定的任務(wù)。
Task
Task就是任務(wù)的意思矾屯，grunt支持自定義任務(wù)兼蕊，也支持使用現(xiàn)成的插件任務(wù)。比如向控制臺(tái)輸出一句問(wèn)候這可以被認(rèn)為是一個(gè)Task件蚕，對(duì)所有的js文件進(jìn)行壓縮這也是一個(gè)Task孙技，通常任務(wù)(Task)都是可配置的产禾。
Grunt本地依賴
安裝了grunt命令行不等于就安裝了grunt，這只是讓我們擁有了在命令行中使用grunt相關(guān)命令的能力绪杏，對(duì)于每個(gè)需要使用grunt的工程下愈，仍然需要為其配置grunt本地依賴。
Grunt插件(Plugins)
Grunt插件是一系列能夠用于不同項(xiàng)目的可配置任務(wù)的集合蕾久。Grunt插件通常以npm包的形式發(fā)布势似。Grunt官網(wǎng)的插件列表列出了所有可用的Grunt插件，截止當(dāng)前的插件數(shù)量為6,393個(gè)僧著，其中帶有contrib前綴的插件由Grunt官方開(kāi)發(fā)和維護(hù)履因。
package.json文件
package.json文件用于被npm存儲(chǔ)項(xiàng)目的元數(shù)據(jù)，以便將此項(xiàng)目發(fā)布為npm模塊盹愚。我們可以在此文件中列出項(xiàng)目依賴的Grunt和Grunt插件栅迄，保存在devDependencies（開(kāi)發(fā)依賴）配置字段內(nèi)，我們可以通過(guò)$ npm install命令來(lái)加載該文件中的所有依賴項(xiàng)皆怕。
Gruntfile.js文件
Gruntfile文件是Grunt項(xiàng)目中最核心的文件毅舆，該文件同package.json文件一起存放在項(xiàng)目的根目錄中，主要用來(lái)配置或定義任務(wù)（task）并加載Grunt插件愈腾。標(biāo)準(zhǔn)的grunt項(xiàng)目中必須擁有package.json和Gruntfile這兩個(gè)文件憋活。
node_modules文件夾
node_modules文件目錄存放著從遠(yuǎn)程倉(cāng)庫(kù)下載的grunt以及所有相關(guān)的grunt插件。
2.2 Grunt的運(yùn)轉(zhuǎn)機(jī)制
上面給出了Grunt項(xiàng)目中各主要組件的關(guān)系圖示虱黄，是根據(jù)個(gè)人的理解繪制的悦即，所以可能并非完全準(zhǔn)確，但基本上已經(jīng)能夠說(shuō)清楚Grunt的運(yùn)轉(zhuǎn)機(jī)制了橱乱。
我們?cè)谑褂肎runt作為項(xiàng)目構(gòu)建工具的時(shí)候辜梳，所做的事情大概可以分成三塊：準(zhǔn)備、配置泳叠、執(zhí)行作瞄。
① 準(zhǔn)備階段
準(zhǔn)備階段主要進(jìn)行以下操作
? node環(huán)境的安裝、npm的安裝(在安裝node的時(shí)候默認(rèn)安裝)
? grunt-cli命令行的安裝(通過(guò)
$ npm install -g grunt-cli命令)
? 創(chuàng)建package.json文件(手動(dòng)創(chuàng)建或通過(guò)
$ npm init命令交互式創(chuàng)建)
? 配置grunt本地依賴(通過(guò)
$ npm install grunt --save-dev下載grunt到項(xiàng)目)
? 安裝需要的grunt插件(通過(guò)
$ npm install grunt-contrib-xx --save-dev命令把需要的插件下載到node_modules目錄)
② 配置階段
配置階段主要就是創(chuàng)建和編輯Gruntfile文件析二，在該文件中接收grunt參數(shù)并配置Task粉洼，注冊(cè)Task。Task簡(jiǎn)單說(shuō)就是任務(wù)的意思叶摄，我們可以自定義任務(wù)，也可以直接使用現(xiàn)成的安拟、一些其他優(yōu)秀開(kāi)發(fā)者定義好并打包為node模塊發(fā)布的任務(wù)（其實(shí)就是grunt插件）蛤吓。
一般來(lái)說(shuō)，我們總是通過(guò)grunt為我們提供的grunt.initConfig方法來(lái)對(duì)Task(插件)進(jìn)行配置糠赦，如果是該Task是Grunt插件那么還需要先從node_modules目錄中加載会傲。
如果對(duì)多個(gè)Task的執(zhí)行有指定的順序或者依賴關(guān)系锅棕，那么我們可以通過(guò)grunt.registerTask方法來(lái)注冊(cè)Task。
③ 執(zhí)行階段
在執(zhí)行階段淌山，通過(guò)在命令行中輸入$ grunt task名稱的方式來(lái)執(zhí)行指定的任務(wù)裸燎。
執(zhí)行Task的時(shí)候，可以單個(gè)執(zhí)行泼疑，例如：
$ grunt taskName1
$ grunt taskName2
也可以用單條命令執(zhí)行多個(gè)Task德绿，每個(gè)Task都將按照參數(shù)的傳入順序依次執(zhí)行，例如：
$ grunt taskName1 taskName2
在使用構(gòu)建工具的時(shí)候退渗，這些Task具體怎么執(zhí)行移稳，執(zhí)行的順序等并非是固定不變的，需要結(jié)合特定的需求來(lái)特殊處理会油。如果總是有一組Task需要按順序執(zhí)行个粱，一般可以使用grunt.registerTask方法來(lái)給這組Task設(shè)置個(gè)別名，這一組的Task以數(shù)組的形式傳遞翻翩。
例如：要依次執(zhí)行js文件的合并都许、語(yǔ)法檢查、代碼壓縮嫂冻、css代碼壓縮等任務(wù)胶征，則配置好相關(guān)Task后可以像下面這樣來(lái)設(shè)置。
grunt.registerTask("customTask",["concat","jshint","uglify","cssmin"]);
要執(zhí)行這組任務(wù)的時(shí)候絮吵，直接執(zhí)行$ grunt customTask命令即可弧烤。
