在前端工程化系列[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.registerTask("customTask",["concat","jshint","uglify","cssmin"]);

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

---

總結

以上是生活随笔為你收集整理的前端工程化系列[03]-Grunt构建工具的运转机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。