前端构建工具gulp之基本介绍
1、基本介紹
gulp.js是一個自動化構建工具，是自動化項目的構建利器?？梢詫W站的資源進行優化，將開發過程中一些重復的任務通過執行命令自動完成。這樣能很大的提高我們的工作效率。
gulp.js是基于Node.js構建的，利用Node.js流可以快速的構建項目，例如能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監聽文件在改動后重復指定等。
2、自動化構建工具
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
轉載于:https://www.cnblogs.com/wjmm/p/8311462.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的前端构建工具gulp之基本介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux 静态库 动态库
- 下一篇： 小程序 常用快捷键