前言??
- 對于剛畢業踏入社會的小白前端，在習慣了
Vue腳手架完成業務功能后自帶的webpack打包后對于打包的印象基本上就只有一個:npm run build - 但是往往我們看招聘資訊上面都有這么一行 有使用Gulp、Webpack等專案自動工程化經驗者優先
- 這時候我們就去找兩者的區別，聽網上簡單的描述就是 這兩?干的事情都一樣呀不都是優化性能嗎?
- 說到自動化，也就是我們經常說的前端構建工具，因為構建工具就是用來讓我們不做機械重復的事情，解放我們的雙手，但其實
gulp和webpack的定位不同，沒有什么可比性就更別說是有沖突了，在翻閱了很多資料后打算在本文記錄一下，如果有說的不對的地方歡迎大佬們在評論區指教~~~~😰
使用場景🏄
舉幾個簡單的場景好理解一點
檔案壓縮
我們知道檔案如果越大，那么在瀏覽器下載或者打開的速度就會越慢，而對于css檔案和js檔案，里面的換行和空格只是方便我們開發者去閱讀但是對于計算機來說都是一樣的，所以如果我們減少空格和換行也可以減少檔案大小，檔案合并
我們一個網站肯定不止有一個js檔案那么如果js檔案越多，瀏覽器并發下載總的速度越慢，如果可以減少js檔案數量是不是也可以加快速度呢？
當然還有我們開發經常遇到的很多場景和苦惱的地方，我們要解決這些問題包括圖片大小之類的在之前都需要自己去壓縮網站壓縮但是有了自動化構建工具我們就可以提高我們開發效率讓我們的注重點放在打代碼上
gulp??
- 正如官網所說 gulp將開發流程中讓人痛苦或耗時的任務自動化，從而減少你所浪費的時間、創造更大價值
gulp注重前端開發流程，gulp可以進行js，html，css，img的壓縮打包，是自動化構建工具，可以將多個js檔案或是css壓縮成一個檔案，并且可以壓縮為一行，以此來減少檔案體積，加快請求速度和減少請求次數，- 不僅能對網站資源進行優化，而且在開發程序中很多重復的任務能夠使用正確的工具自動完成，讓我們可以專注于代碼，提高作業效率，簡單來說就是配置需要的插件，就能幫你把以前需要手動去做的事情給做了，
更多gulp使用可以前往官網閱讀
webpack?
沒錯 還是這張圖，想必大家對webpack已經挺熟悉的了
- 正如官網所說本質上，webpack 是一個用于現代 JavaScript 應用程式的 靜態模塊打包工具
webpack側重模塊化打包，webpack只認識javascript，所以會把所運用的所有資源包括圖片、js檔案、css檔案等通過loader和plugin進行處理轉化成模塊，
更多webpack使用可以前往官網閱讀
談談兩者?
緣由
-
放在以前開發者想用
sass寫css，專案有很多很大的圖片，那么就要去編譯器編譯各自的檔案，通過圖片壓縮工具去壓縮圖片，然后過了幾天又改了需求又更換了圖片，那么又要去通過壓縮工具壓縮圖片進行如此重復的操作，然后就開發出了自動化這個流程的Grunt/Gulp,寫完代碼想發布就直接一句命令列就可以， -
但是
gulp解決不了模塊化js檔案的問題，于是就配置sea.js、require.js的插件用來解決js模塊化， -
后來出了一個
webpack說我們能不能把所有的檔案都用js來生成依賴，最后生成一個bundle呢？于是webpack為了解決轉化不同檔案而引入了loader比如讓sass-loader轉化sass變成css等loader， -
后來人們發現
webpack有個plugins的選項,可以用來進一步處理經過loader生成的bundle.js，于是有人寫了對應的插件,最后webpack也可以使用自動化構建了，
雖然兩者都可以做自動化構建的作業，但是他們兩個的定位是不同的，
比較
gulp本質上是自動化構建工具，更加注重規范前端開發流程而需要通過插件才支持模塊化，webpack則是模塊打包器，通過loader體系支持不同的模塊,plugin體系提供更多額外的功能表面看webpack是把js代碼進行了翻譯，其實每個js檔案都是一個個單獨的模塊，而webpack是把這些模塊打包到一起的一個工具，生成一個最終的js，
借用@DOM哥分享的一個表格從各個角度對gulp和webpack做的對比：
| Gulp | Webpack | |
|---|---|---|
| 定位 | 基于流的自動化構建工具 | 一個萬能模塊打包器 |
| 目標 | 自動化和優化開發作業流，為通用 website 開發而生 | 通用模塊打包加載器，為移動端大型 SPA 應用而生 |
| 學習難度 | 易于學習，易于使用，api總共只有5個方法 | 有大量新的概念和api，不過好在有詳盡的官方檔案 |
| 適用場景 | 基于流的作業方式適合多頁面應用開發 | 一切皆模塊的特點適合單頁面應用開發 |
| 作業方式 | 對輸入（gulp.src）的 js，ts，scss，less 等源檔案依次執行打包（bundle）、編譯（compile）、壓縮、重命名等處理后輸出（gulp.dest）到指定目錄中去，為了構建而打包 | 對入口檔案（entry）遞回決議生成依賴關系圖，然后將所有依賴打包在一起，在打包之前會將所有依賴轉譯成可打包的 js 模塊，為了打包而構建 |
| 使用方式 | 常規 js 開發，撰寫一系列構建任務（task）， | 編輯各種 JSON 配置項 |
| 優點 | 適合多頁面開發，易于學習，易于使用，介面優雅， | 可以打包一切資源，適配各種模塊系統 |
| 缺點 | 在單頁面應用方面輸出乏力，而且對流行的單頁技術有些難以處理（比如 Vue 單檔案組件，使用 gulp 處理就會很困難，而 webpack 一個 loader 就能輕松搞定） | 不適合多頁應用開發，靈活度高但同時配置很繁瑣復雜，“打包一切” 這個優點對于 HTTP/1.1 尤其重要，因為所有資源打包在一起能明顯減少瀏覽器訪問頁面時的資源請求數量，從而減少應用程式必須等待的時間，但這個優點可能會隨著 HTTP/2 的流行而變得不那么突出，因為 HTTP/2 的多路復用可以有效解決客戶端并行請求時的瓶頸問題， |
| 結論 | 瀏覽器多頁應用(MPA)首選方案 | 瀏覽器單頁應用(SPA)首選方案 |
寫在最后👋
gulp和webpack的關系舉個不是很恰當的例子就是當你想去按摩店（gulp）放松一下，有一天你去理發店（webpack）洗頭的小哥說可以幫你按摩一下，從那以后，你發現洗頭可以順便按摩很方便啊，于是你就安利給朋友，以后大家都這樣做了，
- 說回兩者，它們本來就不是一個替代另一個的問題，不是基于另一個存在，
gulp不是原生的，就像react那樣，只是貼近原生，就比如就像linux和windows， gulp任務定義和管理webpack做不到,gulp需要拓展很多功能才能比較好支持模塊化，而webpack本身就是模塊化為核心，- 這是不可比較的，就像網上說
Vue集成的雙向系結很牛逼，但是面對很多場景React更牛逼，道理是一樣的，當然webpack牛逼應該在于它的思想剛好適用于大部分場景問題，我們可能遇到的大部分問題都可以用webpack解決，尤其是它封裝了大部分處理細節，這樣讓更多的人直接簡單配置就可以很好的用，直接傻瓜化了，尤其是強大的拓展能力幾乎讓他無所不能，但是對程式員并非是絕對的好事情，就像抽象用多了忘記了底層，解決問題工具用多了，我們只能依靠解決方案吃飯，所以很多老板就會說啊？前端這么簡單 - 所以我們能做的就是提高自己的見識，多看多寫代碼，對應不同的應用場景使用不同的工具和不同的思想，
- 如果您覺得這篇文章有幫助到您的的話不妨🍉一鍵三連+評論+轉發🍉支持一下喲~~😛
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303328.html
標籤：其他