Grunt 新手指南

作為一個正在準備從java 後端轉大前端,一直都有想着,在js 的世界裡面有沒有類似于maven或者gradle 的東西..然後,就找到了grunt 這玩意

諸如ant,maven,gradle,make 之流的,那麼我們為什麼要學這麼一個工具了,我們用IDE程式設計不是好好的嗎,要讓人去學這麼一個工具,那麼必然要有這個工具能夠為我們搞定什麼的原因.

選擇Grunt原因

管理我們的檔案依賴

随心所欲的批處理任務

整合常用的前端工具,js混淆,檔案合并壓縮.

說了這麼多,上面就是我們為什麼要選擇grunt.js 作為我們項目建構的工具,如果你沒有任何項目建構的概念,我建議了就不要看有關grunt的任何資料了,包括本文.因為,你看不懂我接下來我要寫東西,也看不懂任何有關grunt相關資料,是以,就不要浪費時間了.

如果,你之前有接觸過建構工具,或者你現在有項目建構的概念,那麼任務(tasks)這個概念想必了解起來不會有太大的難度了.

隻要在我們的Gruntfile.js 檔案寫上這麼幾句

接着我們隻要在目前目錄運作 <code>grunt test</code>

就能看到控制台輸出

Hello World.

接下來咱們有個node 環境就可以想幹嘛的就幹嘛了..停住!如果隻是這樣,這跟我們寫個shell腳本有什麼差別呢?實際上grunt跟shell 腳本沒什麼差別,隻是grunt有一個node 運作環境,可以比寫shell腳本簡單那麼一些,如果你已經是shell腳本達人,我覺得沒有再學grunt必要了.

有時候,我們有很多任務,不過這裡任務,都可以歸類為一中,我們就需要注冊一個多任務來處理這種情況,例如,檔案的操作就有,建立,打開,重命名,這些任務都可以歸類為檔案操作任務

這個時候我們運作的時候,就會看到如下接口

<code>grunt file:create</code>

create: ‘source file’

<code>grunt file:open</code>

open: ‘open file’

<code>grunt file:delete</code>

delete: ‘delete file’

那麼在我們自定義多任務的時候,可以通過<code>this.target</code> 獲得目前任務指令,然後通過<code>this.data</code> 擷取到我們的配置值,接下來就是發揮你的想象力的時候了.

實際上grunt不是什麼神奇的時候,它最不過是一個運作在node的一個指令行工具,可以友善我們用js寫腳本而已.

grunt-contrib-watch

監聽檔案修改

grunt-curl

想curl 下載下傳遠端js

grunt-contrib-clean

檔案清理工具

grunt-contrib-cssmin

css壓縮工具

grunt-contrib-copy

檔案複雜工具

本文轉自youxiachai 部落格，原文連結：  http://blog.51cto.com/youxilua/1286465 如需轉載請自行聯系原作者