我們公司在前端開發上，有用到Grunt來協助發佈流程，因此介紹一下Grunt的用法和實務上的操作。

Grunt的官網: http://gruntjs.com/
Grunt是什麼？
「The JavaScript Task Runner」這是他們自己的解釋，簡單的說，就是可以把一些任務，透過Grunt來自動化執行，例如測試、JSLint檢查、JS壓縮、less、coffee的編譯等等，可以透過一個指令，就把所有的事情做好。

怎麼用Grunt
Grunt是在Node之上建構起來的，所以要先裝Node，請先到 http://nodejs.org/，下載你的OS適用的版本。

安裝後，就可以用NPM來裝Grunt 的命令列工具:

npm install -g grunt-cli

**注意：**Grunt 4.x和3.x有相當大的改變，因此如果之前裝過3.x的grunt，須先移除舊版，再執行上面的動作：

npm uninstall -g grunt

grunt-cli的指令的工作只是在執行Gruntfile.js, 所有自動化的設定都在這個工作腳本中。

使用grunt
在新專案使用Grunt，必須要先有兩個檔案，一個是package.json，一個是Gruntfile，在package.json中，Grunt 和Grunt 任務會用的到外掛，都會列在devDependencies 中。

如果你的目錄下還沒有package.json，可以使用npm init指令會產生一個基本的檔案。

而Gruntfile，也就是Gruntfile.js(在4.x的版本之前這個檔案的名稱是gurnt.js)或Gruntfile.coffee，它是用來設定任務與載入Grunt外掛。我們實際要做的自動化任務，都是在這裡面定義。

package.json與Gruntfile.js都是放在專案的根目錄底下，執行npm install，就會安裝列在devDependencies中的外掛。

安裝grunt和grnut 外掛
最簡單的方法就是

npm install (grunt或grunt 外掛名稱) --save-dev

它除了會安裝相關的module之外，也會將相關的plugin寫到package.json的--save-dev段落中

以下以安裝jasmine的外掛為例：

npm install grunt-contrib-jasmine　--save-dev

至於有哪些外掛可以用，可以看：http://gruntjs.com/plugins

Gruntfile
Gruntfile.js就是一個符合JS語法的檔案，它是由下面幾個部分組成

封裝函式（wrapper function）
專案和任務設定
載入grunt plugin和任務
自訂任務

詳細的說明，可以參考官網：http://gruntjs.com/sample-gruntfile

以上是Grunt的大致的介紹，接下來以我自己用Grunt來自動化編譯less的經驗，來說明開發上的實務。

由於我們網站使用bootstrap來開發，而bootstrap的背後就是使用less，所以我們的css編寫，為了一致化，也改用less。

使用less有一個問題，就是寫完less之後，必須執行lessc這個指令來編譯成css，老實說，有時只是調個顏色和間距，就要在命令列上key一次編譯指令，會讓人覺得寫less比寫原生css還要沒有效率。

後來發現Grunt這個工具後，他的外掛有支援less，所以就覺得可以試用看看。

一開始只有裝less的外掛，是有省事一點點，因為本來要打的是：

lessc --yui-compress 原始檔　目的檔

好把less編譯成css之後，再用yui-compress壓縮。

現在只要打

grunt

就自動處理完畢。而且有時候遇到同時改bootstrap和自己的less檔案的時候，就省更多。

但是這樣還不夠好，因為在修改CSS頻率很高的時候，還是得一直在命令列狂下grunt指令。

如果說可以我一修改完less檔，存檔，grunt就幫我自動編譯，那麼不就跟編輯原生的css檔案一樣，改完馬上可以reload看效果。

稍微找一下plugin，終於找到 grunt-contrib-watch，可以定義要監控的檔案，然後執行命令。

於是使用這兩個外掛後，我就能享受less在ccs開發上，效率快、易維護的好處，又能立即看到效果，不用手動編譯。

如果再結合live-reload的外掛，甚至連按reload這個動作都可以省略，存檔後切到瀏覽器，就是最新的結果。只是因為之前看live-reload和watch搭配使用好像有點問題，因此暫時沒有用。

善用Grunt.JS，會讓開發效率提升，建議大家不妨試試。