前端工程化系列[03]-Grunt構建工具的運起色制

在前端工程化系列[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命令便可。