在前端工程化系列[02]-Grunt構建工具的基本使用這篇文章中，已經對Grunt做了簡單的介紹，此外，我們還知道了該如何來安裝Grunt環境，以及使用一些常見的外掛了，這篇文章主要介紹Grunt的核心元件和運轉機制。

Grunt是一套前端自動化構建工具，可以幫助我們簡化開發中需要反覆處理的任務，甚至可以實現自動構建等功能。

Grunt擁有數量龐大的外掛，這些外掛能夠幫助我們處理開發中遇到的絕大多數構建任務，比如程式碼的預編譯、壓縮、程式碼檢查、單元測試等。但為什麼在終端輸入Grunt相關命令，就能夠執行對應的任務，Grunt到底是怎麼運轉的？這些知識對於深入研究Grunt非常重要,下面我們從Grunt運轉的元件和運轉機制兩方面來展開討論。

2.1 Grunt的核心元件

node和npm

Grunt專案基於Node.js，Grunt和相關的外掛都通過 npm 安裝並管理。

Grunt-cli

Grunt命令列用於呼叫與Gruntfile檔案在同一目錄中的 Grunt模組，通過-g引數把Grunt命令列安裝到全域性環境中，這樣的話在所有檔案目錄中都可以呼叫grunt相關的命令。

在命令列中執行Grunt 相關命令時(比如 $grunt default)，內部會根據node提供的require系統查詢來當前目錄中安裝的 Grunt，如果找到那麼載入，並把載入的grunt作為引數傳遞到Gruntfile檔案中，然後執行指定的任務。

Task

Task就是任務的意思，grunt支援自定義任務，也支援使用現成的外掛任務。比如向控制檯輸出一句問候這可以被認為是一個Task，對所有的js檔案進行壓縮這也是一個Task，通常任務(Task)都是可配置的。

Grunt本地依賴

安裝了grunt命令列不等於就安裝了grunt，這只是讓我們擁有了在命令列中使用grunt相關命令的能力，對於每個需要使用grunt的工程，仍然需要為其配置grunt本地依賴。

Grunt外掛(Plugins)

Grunt外掛是一系列能夠用於不同專案的可配置任務的集合。Grunt外掛通常以npm包的形式釋出。Grunt官網的外掛列表列出了所有可用的Grunt外掛，截止當前的外掛數量為6,393個，其中帶有contrib字首的外掛由Grunt官方開發和維護。

package.json檔案

package.json檔案用於被npm儲存專案的元資料，以便將此專案釋出為npm模組。我們可以在此檔案中列出專案依賴的Grunt和Grunt外掛，儲存在devDependencies（開發依賴）配置欄位內，我們可以通過$ npm install命令來載入該檔案中的所有依賴項。

Gruntfile.js檔案

Gruntfile檔案是Grunt專案中最核心的檔案，該檔案同package.json檔案一起存放在專案的根目錄中，主要用來配置或定義任務（task）並載入Grunt外掛。標準的grunt專案中必須擁有package.json和Gruntfile這兩個檔案。

node_modules資料夾

node_modules檔案目錄存放著從遠端倉庫下載的grunt以及所有相關的grunt外掛。

2.2 Grunt的運轉機制

上面給出了Grunt專案中各主要元件的關係圖示，是根據個人的理解繪製的，所以可能並非完全準確，但基本上已經能夠說清楚Grunt的運轉機制了。

我們在使用Grunt作為專案構建工具的時候，所做的事情大概可以分成三塊：準備、配置、執行。

   ① 準備階段   

準備階段主要進行以下操作

❏  node環境的安裝、npm的安裝(在安裝node的時候預設安裝)

❏  grunt-cli命令列的安裝(通過$ npm install -g grunt-cli命令)

❏  建立package.json檔案(手動建立或通過$ npm init命令互動式建立)

❏  配置grunt本地依賴(通過$ npm install grunt --save-dev下載grunt到專案)

❏  安裝需要的grunt外掛(通過$ npm install grunt-contrib-xx --save-dev命令把需要的外掛下載到node_modules目錄)

   ② 配置階段   

配置階段主要就是建立和編輯Gruntfile檔案，在該檔案中接收grunt引數並配置Task，註冊Task。Task簡單說就是任務的意思，我們可以自定義任務，也可以直接使用現成的、一些其他優秀開發者定義好並打包為node模組釋出的任務（其實就是grunt外掛）。

一般來說，我們總是通過grunt為我們提供的grunt.initConfig方法來對Task(外掛)進行配置，如果是該Task是Grunt外掛那麼還需要先從node_modules目錄中載入。

如果對多個Task的執行有指定的順序或者依賴關係，那麼我們可以通過grunt.registerTask方法來註冊Task。

   ③ 執行階段   

在執行階段，通過在命令列中輸入$ grunt task名稱的方式來執行指定的任務。

執行Task的時候，可以單個執行，例如：

$ grunt taskName1
$ grunt taskName2

也可以用單條命令執行多個Task，每個Task都將按照引數的傳入順序依次執行，例如：

$ grunt taskName1 taskName2

在使用構建工具的時候，這些Task具體怎麼執行，執行的順序等並非是固定不變的，需要結合特定的需求來特殊處理。如果總是有一組Task需要按順序執行，一般可以使用grunt.registerTask方法來給這組Task設定個別名，這一組的Task以陣列的形式傳遞。

例如：要依次執行js檔案的合併、語法檢查、程式碼壓縮、css程式碼壓縮等任務，則配置好相關Task後可以像下面這樣來設定。

要執行這組任務的時候，直接執行$ grunt customTask命令即可。