[教學] Grunt 學習筆記(1) - Getting Started

2013年6月26日

一般來說,網站上線前都要經過壓縮、測試、打包 package 等佈署動作,在 Linux/Unix 環境下,我們通常將這些指令 (shell script) 寫在 Makefile 裡方便自動化執行。不過很可惜地,這些指令並不具備跨平台的能力,也就是說,在 Windows 與 Linux/Unix 各有不同的寫法。 
Grunt 是一套基於 NodeJS 的 JavaScript Task Runner 工具,它可以跨平台(Windows 系統也能用)、沿用 JavaScript 語法(免學 shell script),還有眾多的 Plugins 支援 CoffeeScript、Handlebars、JSHint、Less、Sass、Compass 等常用工具。

Getting Started

學習 Grunt 最快的方法就是建立一個可執行的範例 。本文的範例將會建立一個 Grunt Task ,完成後就可以讓 Grunt 利用 uglify 工具自動化壓縮 JavaScript 檔案,以後上線部署再也不用純手工壓縮了!
首先我們依照 Getting Started 教學新開了 Gruntfile.js 以及 package.json 兩個檔案,接著在專案目錄下執行命令 grunt ,但是迎面而來的卻是令初學者傻眼的錯誤畫面:

錯誤訊息回報 ugligy:build 這個 Task 出錯了。為了找出原因,我們回過頭來檢查 Gruntfile.js ,看看這個 Task 做了什麼事情。
ugligy:build Task 會將 /src 目錄下的原始檔 helloworld.js (變數 pkg.name 即為範例中的 "my-project-name",這裡我們將它改為 "helloworld" 方便說明)壓縮處理後,放到 /build 目錄下並且命名為 helloworld.min.js("helloworld" 即變數 pkg.name )。
為了順利執行 grunt,我們在專案目錄下建立一個空的 src 目錄,並且在裡面新增一個名為 helloword.js 的 JavaScript 檔案,此外,再新建一個空的 build 目錄用來放置壓縮處理過的結果。完成後的目錄結構如下所示:

回到專案目錄下重新執行指令 grunt,此時取而代之的是是令人放心的成功訊息!(撒花)壓縮處理過的新檔案如預期地新增到 build 目錄下:


更多 Grunt 功能

到這邊我們也算是略懂 Grunt 了,那麼除了 uglify 外,Grunt 還能做些什麼呢?官方網站的 Plugins 頁面列出了所有 Grunt 支援的功能,幾乎所有常見的開發工具都在列表中了。如果這些還不夠的話,Grunt Task 也支援 Shell 指令,如此一來,幾乎沒有什麼是 Grunt 辦不到呢!
回到開發流程,我認為 Grunt 特別適用於混用 Node.js, Livereload, SASS 等工具的開發環境,這些工具都依賴特定的執行環境,此時專案需要並存 Makefile 以及 Rakefile (Ruby) 等,非常複雜且不易維護。使用 Grunt 可以整合這些 Task,讓開發/部署工作變得更單純,這也是除了跨平台外, Grunt 優於 Shell Script / Makefile 的一大優勢。

Reference

0 意見 :

Related Posts Plugin for WordPress, Blogger...