iT邦幫忙

5

Grunt.js用在前端開發上

  • 分享至 

  • xImage
  •  

我們公司在前端開發上,有用到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,會讓開發效率提升,建議大家不妨試試。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
yiying
iT邦新手 1 級 ‧ 2013-05-13 09:50:35

酷耶,我一直很想試試Grunt,感謝分享!

我要留言

立即登入留言