grunt從入門到自定義項目模闆

基于任務的指令行建構工具（針對javascript項目）

前端的工具算得上是五花八門，在介紹如何grunt之前，首先我們得反問自己：

grunt能夠幫我們解決什麼問題？

是否有其他更合适的替代方案？

作為一名開發人員，我們見過了不少功能胡裡花哨但并不實用的工具。但是，我們很少會因為一個工具功能很強大而去使用它。更多地，是因為在工作中我們遇到了一些問題，而某個工具剛好幫我們解決了這些問題。

假設我們有個叫<code>imweb_proj</code>的項目，該項目主要包含兩個功能子產品，分别是<code>modulea</code>、<code>moduleb</code>。回想一下，作為一名前端開發人員，從功能開發到産品正式上線，我們的工作流程是什麼樣的：

正式進入編碼工作前，得做些準備工作：

建立目錄<code>imweb_proj</code>，index.html為主入口；根目錄下面再另外建立三個目錄js、css、img，分别用來存放js檔案、css檔案、圖檔

imweb_proj/js下建立個main.js作為項目主邏輯的入口，添加modulea.js、modueb.js，對了，不能把我們的基礎元件badjs.js、simple.js、nohost.js給忘了

imweb_proj/css下建立個reset.css，添加modulea.css、moduleb.css

熱火朝天地編碼，産品終于即将上線，上線前的準備工作同樣不能馬虎

<code>jshint</code>——檢查下js代碼規範性，避免進行類似隐式全局變量這樣的坑裡

<code>concat</code>——js檔案合并，合理減少請求數，提升加載速度

<code>cssmin</code>——css檔案合并，合理減少請求數，提升加載速度

<code>uglyfy</code>——壓縮檔案，減少檔案尺寸，提升使用者側加載速度

<code>qunit</code>——單元測試，提高項目可維護性，結合遞歸測試可盡早發現潛在問題

…

上面的場景是不是很眼熟？重複而枯燥的工作占據了我們太多的時間，忘了誰說過，當重複做一件事超過三次，就應該考慮将它自動化。

grunt正是為了解決上述問題而誕生，它将上面提到的項目結構生成、jshint檢查、檔案合并、壓縮、單元測試等繁瑣的工作變成一個個可自動化完成的任務，一鍵搞定。

文檔豐富：詳細的使用說明，從入門使用，到進階定制，非常詳盡

插件豐富：基本能夠想到的常用的任務，都可以找到

社群活躍：grunt的開發團隊還是挺勤勞的，社群活躍度也挺高

當然有，而且不少，ant、yeoman、mod、fiddler+willow+qzmin等，先不展開

grunt使用場景通常分兩種：

維護現有的grunt項目——已經配置好的項目，下面以jquery plugin項目為例進行講解，簡單了解下一個grunt項目的基本結構；

新建立的grunt項目——包括項目目錄結構的建立，到grunt任務的配置等；這裡可以采用現有的grunt模闆，也可以采用自定義的模闆；下文會采用自定義模闆的形式，逐漸講解如何建立一個**imweb團隊的前端基礎項目結構**

注意：為了解決多版本并存的問題，從<code>0.4.x</code>版本開始，每個項目需獨立安裝grunt及對應插件，版本分别如下：

grunt <code>0.4.x</code>

nodejs <code>&gt;=0.8.0</code>

grunt從版本0.3.x到0.4.x，變化比較大，主要是為了解決grunt多版本共存的問題，有興趣的童鞋可以了解下。如果之前安裝了0.3.x版本，需先進行解除安裝

grunt-cli的主要作用是讓我們可以運作grunt指令，加上-g，則可以在任意目錄下運作，不展開

grunt-init是個腳手架工具，它可以幫你完成項目的自動化建立，包括項目的目錄結構，每個目錄裡的檔案等。具體情況要看你運作grunt-init指定的模闆，以及建立過程中你對問題的回答，下文會簡單講到這個功能。

先運作下面指令安裝grunt-init，

下面我們先通過安裝jquery plugin模闆，來展示gurnt模闆的安裝，項目的建立，以及一個grunt項目的目錄結構

下面指令可以檢視官方維護的grunt模闆

運作下面指令安裝jquery模闆

在上一步中我們已經安裝好了jquery模闆，接着運作下面指令，安裝jquery項目

按照引導回答下面問題，完成項目的建立

項目目錄結構如下：

從上面的目錄結構，大緻可以看出各個目錄、檔案的作用，其中我們需要注意的是兩個檔案gruntfile.js、package.json，這兩個檔案都需要放在項目跟目錄下。下面會稍微詳細介紹到：

gruntfile.js 項目的grunt配置資訊，包括子產品依賴、任務定義

package.json 項目node子產品的依賴資訊，主要根據gruntfile生成

其他其他檔案非grunt項目必須的，可以暫時不去看它

首先運作下面指令，安裝所需node子產品，耐心等候安裝完即可

輸入下面指令，運作grunt任務

輸出如下，done

方式一：運作下面指令，通過逐漸回答問題的方式建立基礎的package.json檔案2```

方式二：建立空的package.json檔案，拷貝下面内容，根據需要進行修改

建立完package.json，運作如下指令，安裝所需插件

運作如下指令，安裝<code>最新版</code>的grunt

其實這種方式還是有點麻煩，grunt團隊還是比較人性化的，針對gruntfile，還提供了一個單獨的plugin，讓我們免去重複勞動之苦，後面再講

打開下載下傳下來的示例目錄，可以看到如下内容：

簡單介紹下裡面内容：

<code>template.js</code> 主模闆檔案，非常重要！裡面主要内容有：項目建立時需要回答的問題，項目依賴的grunt子產品（根據這個生成package.json）

<code>rename.json</code> 針對目前模闆的目錄/文 件重命名規則，不贅述

<code>root/</code> 重要！在這個目錄裡的檔案，通過該模闆生成項目結構時，會将root目錄下的檔案都拷貝到項目中去

下面是template.js最常包含的一些内容，主要包括：

<code>exports.description</code> 模闆簡單介紹資訊

<code>exports.notes</code> 開始回答項目相關問題前，控制台列印的相關資訊

<code>exports.after</code> 開始回答項目相關問題前，控制台列印的相關資訊

<code>init.process</code> 項目建立的時候，需要回答的問題

<code>init.writepackagejson</code> 生成package.json，供grunt、npm使用

reame.json的作用比較簡單，定義了從root目錄将檔案拷貝到實際項目下時的路徑映射關系，以<code>sourcepath: destpath</code>的形式聲明。sourcepath是相對于root的路徑，而destpath則是相對于實際項目的路徑。

ps：當destpath為false時，sourcepath對應的檔案不會被拷貝到項目中去

進入root目錄，可以看到很多檔案，其中我們需要關注的有gruntfile.js、readme.md

gruntfile.js 項目的任務配置資訊，把基礎任務，如jshint、concat、uglify等配置好即可，其他的各個任務可自行擴充

readme.md 項目的readme資訊，一個調理清晰的readme很重要

對gruntfile.js檔案進行修改，如下，熟悉qzmin配置檔案的童鞋應該很容易看懂

花了一點時間把imweb_proj配置好，現在終于到了實際運作階段了。假設我們目前在目錄imweb_proj下，imweb_template為imweb_proj目錄目前僅有的内容

操作步驟可參照**jquery plugin示例：如何通過現有模闆建立項目、運作grunt任務**，下面直接上指令

下面為運作grunt指令後控制台輸出的資訊

可以看到helloproj目錄下的内容發生了改變，enjoy yourself！

上面對grunt進行了入門介紹，下面簡單說下ant、aven

mod：元彥童鞋開發維護，功能很強大，grunt能完成的，mod都能完成，而且使用更加貼近我們的項目實踐，入門更簡單（有部分原因是因為

mod內建了很多常使用者任務，而grunt早期也是這麼做的，不過因為多版本的問題放棄了這種做法），之前聽過元彥的分享，挺不錯的，打算在項目中試用

由于時間問題，這裡沒有對grunt、ant、mod進行詳細的對比，來個todo吧~~