[置頂] Gulp和webpack的區(qū)別，是一種工具嗎？

背景： 最近收到很多童鞋的問(wèn)題：gulp和webpack 甚么關(guān)系，是1種東西嗎？可以只用gulp，不用webpack嗎 或反過(guò)來(lái)？

基于此問(wèn)： 我簡(jiǎn)單歸結(jié)了1下區(qū)分和概念，讓需要的同學(xué)瀏覽理解，從而不把時(shí)間浪費(fèi)到這類模糊不清的選擇問(wèn)題上！

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

gulp是工具鏈、構(gòu)建工具，可以配合各種插件做js緊縮，css緊縮，less編譯 替換手工實(shí)現(xiàn)自動(dòng)化工作

1.構(gòu)建工具

2.自動(dòng)化

3.提高效力用

webpack是文件打包工具，可以把項(xiàng)目的各種js文、css文件等打包合并成1個(gè)或多個(gè)文件，主要用于模塊化方案，預(yù)編譯模塊的方案

1.打包工具

2.模塊化辨認(rèn)

3.編譯模塊代碼方案用

所以定義和用法上來(lái)講 都不是1種東西，無(wú)可比性 ，更不沖突！【固然，也有類似的功能，比如合并，辨別，但各有各的優(yōu)勢(shì)】

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Gulp：解釋圖【純?cè)瓌?chuàng)】轉(zhuǎn)載請(qǐng)注明出處

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Webpack：解釋圖【來(lái)自網(wǎng)絡(luò)和官網(wǎng)】

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

基于此問(wèn)： 來(lái)自知乎的1篇回答！夠白話文了：

怎樣解釋呢？由于 Gulp 和 browserify / webpack 不是1回事

Gulp應(yīng)當(dāng)和Grunt比較，他們的區(qū)分我就不說(shuō)了，說(shuō)說(shuō)用途吧。Gulp / Grunt 是1種工具，能夠優(yōu)化前端工作流程。比如自動(dòng)刷新頁(yè)面、combo、緊縮css、js、編譯less等等。簡(jiǎn)單來(lái)講，就是使用Gulp/Grunt，然后配置你需要的插件，就能夠把之前需要手工做的事情讓它幫你做了。

說(shuō)到 browserify / webpack ，那還要說(shuō)到 seajs / requirejs 。這4個(gè)都是JS模塊化的方案。其中seajs / require 是1種類型，browserify / webpack 是另外一種類型。

• seajs / require : 是1種在線"編譯" 模塊的方案，相當(dāng)于在頁(yè)面上加載1個(gè) CMD/AMD 解釋器。這樣閱讀器就認(rèn)識(shí)了 define、exports、module 這些東西。也就實(shí)現(xiàn)了模塊化。

• browserify / webpack : 是1個(gè)預(yù)編譯模塊的方案，相比于上面 ，這個(gè)方案更加智能。沒(méi)用過(guò)browserify，這里以webpack為例。首先，它是預(yù)編譯的，不需要在閱讀器中加載解釋器。另外，你在本地直接寫JS，不論是 AMD / CMD / ES6 風(fēng)格的模塊化，它都能認(rèn)識(shí)，并且編譯成閱讀器認(rèn)識(shí)的JS。這樣就知道，Gulp是1個(gè)工具，而webpack等等是模塊化方案。Gulp也能夠配置seajs、requirejs乃至webpack的插件。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

加入： JS前端開發(fā) QQ群 ：147250970  歡迎加入~！氣氛熱忱，歡樂(lè)多，妹子多！

 web前端 聚集地，會(huì)聚了全國(guó)頂尖的web前端酷愛(ài)者，最新技術(shù)，最炫潮流，最靠譜的話題：
  做好現(xiàn)在！技術(shù)只是為了改變生活！JS前端實(shí)用開發(fā)QQ群 ：147250970

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)