Manage Your JS Project with Grunt

之前有提過在因緣際會之下,踏入了另一個坑(誤),也因為這截然不同的工作性質,也開始遇到一些之前不曾想過的問題,這些問題也是因為JS在現今Web開發逐漸重要而伴隨而來的問題-optimization

當然說最佳化其實是個很籠統的講法,因為對於網路服務來說,太多地 方會影響到使用者瀏覽的速度,所以,可以「最佳化」的部份也是多到一個不行 XD。不過這邊要講的是比較基本的應用(因為我也只會基本的而已...orz ),就是對於JS、CSS的處理,這也是開頭所提到因為網頁開發越來越講求使用者體驗、UI、瀏覽速度等等,所以更多的JS、CSS新功能被大量運用,連帶的讓JS、CSS大量成長,可能大家會覺得在怎樣也不過就是幾kb、甚至更誇 張一點到幾MB的檔案而已嘛,但是對於不同設備的使用者,可能就會造成明顯的差異(該死的mobile device...XD)

基於這個原因,目前對於網站會用到的一些資源(JS, CSS, Images等),都會先做最佳化(合併、壓縮)之後才會放到線上,這樣有助於提昇使用者瀏覽 的速度,當然這只是其中必須的工作之一,如果更嚴謹一點,你可能會希望先跑過JSLint或Testing,然後你就會發現每次都要做一堆事超煩人...

這是就本篇要提到的工具-Grunt

Grunt is a task-based command line build tool for JavaScript projects.

正如作者所寫的解釋,grunt提供的功能就是可以幫你把JS Project所需要的工作,透過定義好的任務(Task),讓開發者可以很快速的執行這些例行的工作 ,甚至你也可以自己撰寫客製的任務(譬如說佈署程式到Amazon上?)

看一下範例:

說明直接寫在範例裡面

正如範例一樣,你只需要執行grunt [default],就自動執行lint->test->docs的任務,如此一來就可以簡化每此都需要跑相同指令的麻煩,此外,你 更可以把整個部屬的行為都實作出來,譬如「佈署」的行為:(lint test concat min docs deploy)[有些task是不存在的, just example XD],這樣就可以簡化整個佈署程式的行為,非常方便!

Ferrari Lee

Read more posts by this author.

Subscribe to Ferrari != Ferrari

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!