背景： 最近收到很多童鞋的問題：gulp和webpack 什麼關係，是一種東西嗎？可以只用gulp，不用webpack嗎 或者反過來？
gulp是工具鏈、構建工具，可以配合各種外掛程式做js壓縮，css壓縮，less編譯 替代手工實現自動化工作
1.構建工具
2.自動化
3.提高效率用
1.打包工具
2.模組化識別
3.編譯模組**方案用
webpack：解釋圖【來自網路和官網】
基於此問： 來自知乎的一篇回答！夠白話文了：
怎麼解釋呢？因為 gulp 和 browserify / webpack 不是一回事
gulp應該和grunt比較，他們的區別我就不說了，說說用處吧。gulp / grunt 是一種工具，能夠優化前端工作流程。比如自動重新整理頁面、combo、壓縮css、js、編譯less等等。簡單來說，就是使用gulp/grunt，然後配置你需要的外掛程式，就可以把以前需要手工做的事情讓它幫你做了。
說到 browserify / webpack ，那還要說到 seajs / requirejs 。這四個都是js模組化的方案。其中seajs / require 是一種型別，browserify / webpack 是另一種型別。
browserify / webpack : 是乙個預編譯模組的方案，相比於上面 ，這個方案更加智慧型。沒用過browserify，這裡以webpack為例。首先，它是預編譯的，不需要在瀏覽器中載入直譯器。另外，你在本地直接寫js，不管是 amd / cmd / es6 風格的模組化，它都能認識，並且編譯成瀏覽器認識的js。這樣就知道，gulp是乙個工具，而webpack等等是模組化方案。gulp也可以配置seajs、requirejs甚至webpack的外掛程式。
不知道這樣夠清楚了麼？
Gulp和Webpack的區別
gulp 強調的是前端開發的流程，通過配置一系列的task，定義task處理的事務 例如 檔案壓縮合併，啟動server 然後定義執行順序，來讓gulp執行task，從而構建其前端專案的流程。合併後仍然是你寫的 只是區域性變數名被替換，一些語法做了轉換而已，整體內容並沒有發生改變。webpack 側...
Gulp和Webpack的區別
gulp和webpack的基本區別 gulp可以進行js，html，css，img的壓縮打包，是自動化構建工具，可以將多個js檔案或是css壓縮成乙個檔案，並且可以壓縮為一行，以此來減少檔案體積，加快請求速度和減少請求次數 並且gulp有task定義處理事務，從而構建整體流程，它是基於流的自動化構建...
gulp和webpack的區別
一 概念 gulp 構建工具 我們可以通過給gulp配置不通的task 通過gulp中的gulp.task 方法配置，比如啟動server sass less預編譯 檔案的合併壓縮等等 來讓gulp實現不同的功能，從而構建整個前端開發流程。webpack 打包工具 我們可以把開發中的所有資源 js檔...