gulp系列文章一 fis vs grunt vs gulp，爲何要是gulp呢？

gulp是最近火起來的前端構建工具，大有趕超grunt之勢，它和grunt這種構建工具比較像。

grunt是寫一個Gruntfile.js來寫配置代碼，gulp則是寫一個gulpfile.js來寫配置代碼。而後經過命令grunt或者gulp來構建項目，

前端如今三足鼎立的構建工具（不算比較老的ant，yeoman），非fis，grunt，gulp莫屬了。

fis是用起來最簡單的。都不用本身寫什麼配置文件。直接執行幾個命令就能把全部東西給你嗖嗖嗖的弄好。難易程度一顆星。

grunt相對來講是最複雜的。Gruntfile.js的配置文件仍是有點麻煩，全部代碼都放在在exports函數裏面。

 

等到用了gulp以後你會有一種驚豔的感受，由於gulp的語法太簡潔了。感受一句多餘的代碼都沒有。或者說它只讓你寫必要的代碼。用gulp官網的話說，這個叫作「代碼優於配置」。並且它裏面引用全部的插件都是用的模塊化，本身還支持promise。這一切會讓前端開發感受逼格更高，用起來更加爽。

grunt的配置文件截圖：

 

gulp的配置文件：

 

gulp還讓人有驚喜的一點是構建項目的時間速度快。它充分利用了node流，優化（縮減）了不少對IO的操做。這樣作的好處是你會發現gulp構建的時候每一個Tast幾乎都是ms級的，用了這個之後你會感受grunt構建時候的速度原來那麼慢。我的感受一樣的項目gulp應該只有grunt 1/5的速度吧。

這三個工具都是基於node和npm的。

node也是這兩年前端的新星，它的的高併發處理能力大概也只有nginx能比肩了。雖然一個是程序語言，一個是web服務器，二者並非同一物種，但它們最大的優勢其實異曲同工，都是相比較其它語言來講優秀的高併發處理能力。

再說npm。說到npm，我印象最深入的反而是它的缺點，用它安裝東西的時候超級慢，並且因爲npm的服務器是在 國外，因此它的網絡很不穩定，有的時候你會發現中午12點開始用npm安裝一個插件，結果到了下午三四點尚未裝上。

還好，淘寶弄了個npm的鏡像cnpm。https://npm.taobao.org/ 用這個安裝感受一開始仍是有點慢。可是過了半個鐘頭左右吧就能感受到安裝速度的明顯提高。

好吧，回到主題gulp，講講它的安裝和使用吧。

gulp的中國官網