前端構建工具gulp之基本介紹

一、基本介紹

　　gulp.js是一個自動化構建工具，是自動化項目的構建利器。能夠對網站的資源進行優化，將開發過程當中一些重複的任務經過執行命令自動完成。這樣能很大的提升咱們的工做效率。

　　gulp.js是基於Node.js構建的，利用Node.js流能夠快速的構建項目，例如能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定等。

二、自動化構建工具

　　grunt : 也是基於Node.js的自動化任務運行器，它在I/O過程（計算機在存儲器上讀取數據和寫入數據的過程）中會產生一些中間態的臨時文件，基於臨時文件再作處理生成最終的構建後的文件。grunt擁有數量龐大的插件，幾乎任何你所要作的事情均可以實現。

　　grunt工做方式是以文件爲媒介來運行它的工做流的，好比執行完一項任務後，會把結果寫入到一個臨時文件中，而後能夠在這個臨時文件內容的基礎上執行其它任務，執行完成後又把結果寫入到臨時文件中，而後又以這個爲基礎繼續執行其它任務...就這樣反覆下去。

      首先 grunt和gulp都是基於Node.js的自動化構建工具，可是它們仍是很大區別的。grunt和gulp的比較：

　　a.使用性：gulp比grunt更簡潔，採用代碼優於配置策略，維護gulp更像是寫代碼，而grunt更像是在寫配置

　　b.構建效率：gulp比grunt更高效，gulp利用流的方式處理文件，經過管道將多個任務和操做鏈接起來，只有一次I/O的過程，而grunt是經過I/O過程產生一些臨時文件，基於臨時文件再作處理。

　　c.構建質量：gulp比grunt構建質量更高，gulp的每一個插件只完成一個任務，分工明確，各個功能經過流進行整合並完成複雜任務，促進插件的可重用性。而grunt一個插件能夠實現多個功能。

　　d.易學程度：gulp比grunt更容易學，gulp的核心api只有5個，而後經過管道流組合成本身想要的任務。

　　FIS3 : 是面向前端的工程構建工具。解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合併、內嵌）、模塊化開發、自動化工具、開發規範、代碼部署等問題。這是百度的前端團隊前端工程化經驗的總結。gulp輕量級，想要實現什麼功能，就安裝什麼插件；而FIS3必須以項目的形式運行，內置集成了大部分經常使用的插件，擁有一套比較強大的解決方案。

　　webpack : 是一種模塊化的解決方案,是文件打包工具。和glup/grunt沒有可比性，只是有類似的功能。它能夠看做模塊打包機，經過分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

　　webpack的工做方式把項目當作一個總體，經過一個給定的主文件，Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

　　每種工具都有其存在的意義，各有各的優點和缺點，咱們要結合咱們項目的實際狀況和需求選擇合適的構建工具。結構簡單的中小型項目用gulp實現基本操做就足夠了，下面主要介紹gulp的使用。

3.gulp的安裝

第一步：安裝Nodejs；首先，gulp是基於Node.js構建的，因此首先要安裝Nodejs,執行命令行 node  -v,查看版本號，查看是否已安裝Nodejs；

　　

第二步：全局安裝gulp；使用npm(包管理工具)安裝插件，先全局安裝gulp,執行命令 npm install gulp -g （-g表示全局安裝），全局安裝爲了能夠運行命令行，執行gulp任務；

第三步：新建package.json文件；在你項目的根目錄下新建package.json文件（注意裏面不能寫註釋） 執行命令 npm init

　　

 第四步：本地安裝gulp插件； 在你的項目內安裝gulp插件，執行命令 npm install gulp --save-dev，本地安裝是爲了腳本依賴，調用gulp插件功能；

　　

 第五步：新建gulpfile.js文件（配置文件），文件名不能更改，例如在裏面執行簡單的任務；

 　　

 第六步：運行gulp