享受 Grunt

Update: 別用 Grunt 了，用 Gulp ！拜拜。

（原文發表於個人我的博客 http://frankfang.com/2013/12/29/grunt-is-awesome/ ，若有錯
誤，還請賜教）

在生產環境中使用 Grunt 已經有兩個多月了，是時候寫一些體會了。目前能在網上搜到很多入門教程，我這篇就再也不贅述 使用 Grunt 的目的、安裝過程和配置方法等了，主要講一些實際工做時的思考。另外還涉及到 Bower 和 Yeoman。

Build Automation

Build Automation 就是「構建自動化」，Wiki 上的解釋是

構建自動化是將軟件開發人員平常工做中的一系列任務自動執行。這些任務包括但不限於

• 將源代碼編譯爲二進制文件
• 打包二進制文件
• 運行測試用例
• 發佈到線上環境
• 添加文檔或發行註釋

爲何 BA 很重要呢，由於它能節省程序員的時間。重複性、可執行的任務，本應交給機器來完成。省時省力，多好。

P.S. 其實 BA 不必定老是好的，見下圖

用 Grunt 以前

BA 具體到前端開發，就包括但不限於如下任務

• 將 LESS/SCSS 和 CoffeeScript 編譯爲 CSS 和 JS
• 將源代碼（JS、CSS、HTML）和圖片壓縮（以節省用戶帶寬）
• 打包或合併資源文件
• 對資源文件作版本控制
• 運行測試用例
• 發佈到線上環境

在 Grunt 以前，咱們通常是怎麼完成這些任務的呢？咱們用了相似的自動構建工具，如 Ant 或 Make。說實話，Grunt 跟這些工具的區別可能僅僅是語言的選擇不一樣，但這正是吸引咱們前端開發者的一點——使用 JS 做爲開發語言。

Ant 我真是從沒用過， 由於我真的看不懂 XML（其實我是忠實的 Java 黑你應該知道吧）。Makefile，總感受是 C/C++ 程序員用的東西，也無愛。

感謝 Grunt，我不用去學習 Ant 和 Make，就能夠按個人想法來作自動構建了。

Yeoman 和 Bower

通常來講，用 Grunt 的同時都會配合着 Yeoman 和 Bower 來用。我先吐槽下這倆貨。

Bower 很好用，能節省咱們寶貴的人生。不過 bower list --path 有時候不能把文件的路徑打印完整，每次都要我費勁去翻目錄，由於這些組件的開發者沒有在 .bower.json 裏添加 main 文件的配置，差評。

Yeoman 通常，能幫你寫好初始模板、Gruntfile 和 Bower，可是有兩個缺點

1、臃腫

流行的 generator 添加了過多的任務而顯得十分臃腫！以 generator-backbone 爲例，它添加了 25 項 Grunt 任務，其中 9 項我不怎麼想用，最氣人的是它還有一個 compass 任務，要運行這個任務我須要事先安裝 ruby！你敢再多依賴點兒別的東西嗎！？

2、可定製化差

我想改變一下 generator-backbone 裏面的目錄結構，廢老大力氣了。牽一髮而動全身，並且有些任務插件又沒有文檔，改起來提心吊膽的。

因此目前我仍是沒有直接使用 Yeoman，只是借鑑了裏面的 Gruntfile 的寫法。而且在嘗試寫本身的 generator。

用 Grunt 以後

我用 Grunt 作了哪些事呢？其實主要是兩方面：加快開發和自動構建。

加快開發

主要使用了 watch 任務。

因爲咱們在項目裏採用了 LESS，因此我使用 Grunt 對其進行實時編譯。

Live Reload 功能我並無使用，它很煩，常常在我不想刷新頁面的時候幫我刷新了。並且速度也不夠快。

另外我讓 Grunt 實時運行單元測試。

自動構建

這個過程主要交給 usemin 任務來完成。

它會合並文件、壓縮文件, 以及加版本信息。

咱們的 git commit 便可觸發 CI 來執行 Grunt 命令，而後將其發佈到線上環境。

Workflow

這就是傳說中的 Workflow 啊，將我從繁雜的雜事中解救出來了哇，有一種「世界如此美妙」的感受！

簡單來講，只要在工做中遇到了 over and over again 的任務，我就會考慮把它放入 Grunt 中，做爲 Workflow 的一個步驟。

這樣作的好處是什麼呢？只有一個：把本該讓機器去作的事交給機器去作。