GruntJS

本篇來整理關於 Gulp.js 的一些 GUI 工具，對於不瞭解 Gulp.js 可以參考之前我寫的 The streaming build system Gulp，會紀錄這篇最主要是看到有人在 Github 發了這篇 Is there any GUI tool for Gulp? 而 Gulp.js 底層作者 @robrich 跳出來列出了很多工具，整理如下

看到 Yeoman 作者之一 Addy Osmani 開始 review Gulp build system，由於 Yeoman framework 跟 GruntJS 是很緊密結合的，但是 GruntJS 套件愈來愈多，漸漸的執行 GruntJS 後，開始吃了系統 CPU 及記憶體，這對於開發環境而言，會是一大負擔阿，大家不知道有無發現，跑 Nodejs GruntJS 時，每當存檔的時候，CPU 就開始哀嚎了，我自己是有這方面的體會，加上團隊內並不是每位同仁的電腦都是很 powerful，原本是好意讓團隊開發更遵守 coding style 及統一開發環境，但是 Grunt 的肥大，讓整個 Client 環境 Loading 飆高。所以 Yeoman 看到了 Gulp。也有考慮如何將 Gulp 整合到 Yeoman 專案。

相信現在 Git 已經是大家共通的版本控制工具，每當專案有新的 commit，我們可以透過 Travis 來幫忙做測試，但是 Travis 真的只有支援測試而已，如果測試成功想要進一步 Deploy 到任何機器或者是繼續做任何動作，這些都不支援的，那國外有些 Service 可以整合 Github 或 Bitbucket Project 幫忙做到自動測試及 Deploy，比較常見的就是 Codeship，這服務非常強大，整合了 Heroku，App Engine，Nodejitsu .. 等服務，Deploy 也支援 Fabric, Puppet, Shell script 等等，這家的收費是看每個月做了多少次編譯測試動作，最便宜的方案每個月 $9 美金，只能編譯 50 次。

相信網頁設計師並不陌生 Chrome DevTools，善用 DevTools 可以減少很多 Debug 時間，今天來介紹如何在 Chrome 瀏覽器上直接編輯程式，並且存檔，重新整理網頁後便可看到結果。聽到這裡大家一定會很好奇，不就開系統編輯器 (sublime, pspad, vim …) 工具，直接修改 => 存檔 => 重新整理嘛？但是這並不稀奇阿，重點是 Chrome 瀏覽器可以直接支援 線上編輯檔案，而不是透過系統工具做編輯。這就是 Chrome 強大的地方，今天就來介紹 Chrome workspace。

JSDC 擔任講師，演講主題為『你不可不知的前端開發工具』，這場議程只有30分鐘可以講，時間實在是不太夠，要消化這麼多工具其實對於聽眾有點困難，真是對不起聽眾了，不過沒關係，高雄 KSDG 五月份邀請我講『打造團隊共同開發環境』，其實就是將 GruntJS 精華整個講一遍，大概有一個多小時，底下是官方影音，如果朋友們沒北上參加，也可以透過 JSDC Youtube 來欣賞。 JSDC 35分鐘議程

KSDG 邀請，分享上禮拜在 JSDC 所介紹主題: 你不可不知的前端開發工具，在 JSDC 現場只有半小時可以講，這次在高雄有一個半小時可以講，如果想詳細了解前端工具，可以參考上禮拜的投影片，底下是在高雄軟體科技園區所分享。謝謝 Eric Bi 及工作人員可以讓我分享這次議題。

台灣第 2 屆 JavaScript 研討會在 5/18, 5/19 登場，今年報到率到 95% 了，我也給了一場 Talk，關於前端工具介紹，包含 CoffeeScript, Compass, Livereload, Bower Package Manager .. 等，最後介紹主軸 Grunt.js 來整合這些工具。

Update: 補上一張執行後的截圖 2013.03.27

GruntJS 是一套 JavaScript Task Runner，為什麼官網會這樣寫呢？網站上線之前，是不是需要經過測試，壓縮，及品質控管，這些 Task 該如何實現，在 GruntJS 還沒出現之前，大家可以透過 Linux command 的方式來達成，但是對於前端工程師而言，多學習 command line 真的是要他們的命，所以 GruntJS 解決了此問題，將所有的 Task 用 Javascript 方式設定就可以自動佈署或測試。GruntJS 的 Plugin 也非常多且完整，像是大家常用的 CoffeeScript、Handlebars、Jade、JsHint、Less、Sass、Compass、Stylus…等都有支援。更多好用的 Plugin 可以在官網搜尋頁面上找到。

安裝方式 Grunt 可以透過

Node.js 的管理工具 npm 方式來安裝，Windows 只要到 Node.js 官網下載安裝包，直接按下一步即可安裝完畢，Linux 可以透過 NVM 方式來管理 Node.js 版本，可以參考作者之前寫的 Node Version Manager 版本管理 NVM。需要注意的是 Grunt 0.4.x 需要 Node.js >= 0.8.0 版本才可以。