1
Gulp是任務(wù)運(yùn)行工具。簡單來說，任務(wù)運(yùn)行程序是一個(gè)允許您自動(dòng)執(zhí)行可重復(fù)活動(dòng)的應(yīng)用程序。任務(wù)在JS文件中定義代箭，并使用包含任務(wù)名稱的命令執(zhí)行。
Webpack是一個(gè)模塊構(gòu)建工具涕刚。主要目的是幫助程序模塊及其依賴構(gòu)建靜態(tài)資源嗡综。
gulp可以執(zhí)行單個(gè)指令，如：壓縮某js文件杜漠。
webpack是用來整合多個(gè)js,css模塊成一個(gè)文件极景。
2
gulp指令定義在js文件中察净，webpack在package.json文件中定義任務(wù)腳本。
3
webpack是前端構(gòu)建工具盼樟，稱為模塊打包機(jī)氢卡，webpack支持模塊化；構(gòu)建前端開發(fā)過程中常用的文件晨缴，如：js译秦，css，html击碗，img等筑悴；使用簡單方便，自動(dòng)化構(gòu)建稍途。webpack是通過loader（加載器）和plugins（插件）對(duì)資源進(jìn)行處理的阁吝。
Glup側(cè)重于前端開發(fā)的整個(gè)過程的控制管理，我們可以通過給glup配置不同的task來讓glup實(shí)現(xiàn)不同的功能械拍，從而構(gòu)建整個(gè)前端開發(fā)流程突勇。（通過gulp中的gulp.task（）方法配置，比如server殊者、sass/less預(yù)編譯与境、文件的合并壓縮等等）
區(qū)別：
gulp嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西猖吴，他旨在規(guī)范前端開發(fā)流程。
webpack更是明顯強(qiáng)調(diào)模塊化開發(fā)挥转，而那些文件壓縮合并海蔽、預(yù)處理等功能，不過是他附帶的功能绑谣。
4
怎么解釋呢党窜？因?yàn)?Gulp 和 browserify / webpack 不是一回事
Gulp應(yīng)該和Grunt比較，他們的區(qū)別我就不說了借宵，說說用處吧幌衣。Gulp / Grunt 是一種工具，能夠優(yōu)化前端工作流程壤玫。比如自動(dòng)刷新頁面豁护、combo、壓縮css欲间、js楚里、編譯less等等。簡單來說猎贴，就是使用Gulp/Grunt班缎，然后配置你需要的插件蝴光，就可以把以前需要手工做的事情讓它幫你做了。
說到 browserify / webpack 达址，那還要說到 seajs / requirejs 蔑祟。這四個(gè)都是JS模塊化的方案。其中seajs / require 是一種類型沉唠，browserify / webpack 是另一種類型疆虚。
seajs / require : 是一種在線"編譯" 模塊的方案，相當(dāng)于在頁面上加載一個(gè) CMD/AMD 解釋器右冻。這樣瀏覽器就認(rèn)識(shí)了 define装蓬、exports、module 這些東西纱扭。也就實(shí)現(xiàn)了模塊化牍帚。
browserify / webpack : 是一個(gè)預(yù)編譯模塊的方案，相比于上面 乳蛾，這個(gè)方案更加智能暗赶。沒用過browserify，這里以webpack為例肃叶。首先蹂随，它是預(yù)編譯的，不需要在瀏覽器中加載解釋器因惭。另外岳锁，你在本地直接寫JS，不管是 AMD / CMD / ES6 風(fēng)格的模塊化蹦魔，它都能認(rèn)識(shí)激率，并且編譯成瀏覽器認(rèn)識(shí)的JS。這樣就知道勿决，Gulp是一個(gè)工具乒躺，而webpack等等是模塊化方案。Gulp也可以配置seajs低缩、requirejs甚至webpack的插件嘉冒。
原文：https://blog.csdn.net/xllily_11/article/details/51782005?utm_source=copy
使用這兩種工具，您可以處理幾乎每種類型的工作流咆繁。 在可用性方面讳推，Gulp是獲勝者：更容易定義和執(zhí)行您的任務(wù)。 另一方面么介，Webpack的配置選項(xiàng)更加靈活娜遵，開發(fā)速度非常快壤短，每天都有一個(gè)社區(qū)規(guī)模擴(kuò)大设拟。
