Gulp和webpack的區別，是一種工具嗎？

背景： 最近收到不少童鞋的問題：gulp和webpack 什麼關係，是一種東西嗎？能夠只用gulp，不用webpack嗎 或者反過來？

基於此問： 我簡單歸結了一下區別和概念，讓須要的同窗閱讀理解，從而不把時間浪費到這種模糊不清的選擇問題上！

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

gulp是工具鏈、構建工具，能夠配合各類插件作js壓縮，css壓縮，less編譯 替代手工實現自動化工做

1.構建工具

2.自動化

3.提升效率用

webpack是文件打包工具，能夠把項目的各類js文、css文件等打包合併成一個或多個文件，主要用於模塊化方案，預編譯模塊的方案

 

1.打包工具

2.模塊化識別

3.編譯模塊代碼方案用

因此定義和用法上來講 都不是一種東西，無可比性 ，更不衝突！【固然，也有類似的功能，好比合並，區分，但各有各的優點】

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

Gulp：解釋圖【純原創】轉載請註明出處

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

Webpack：解釋圖【來自網絡和官網】

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

 

基於此問： 來自知乎的一篇回答！夠白話文了：

怎麼解釋呢？由於 Gulp 和 browserify / webpack 不是一回事

Gulp應該和Grunt比較，他們的區別我就不說了，說說用處吧。Gulp / Grunt 是一種工具，可以優化前端工做流程。好比自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來講，就是使用Gulp/Grunt，而後配置你須要的插件，就能夠把之前須要手工作的事情讓它幫你作了。

說到 browserify / webpack ，那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / require 是一種類型，browserify / webpack 是另外一種類型。

• seajs / require : 是一種在線"編譯" 模塊的方案，至關於在頁面上加載一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、module 這些東西。也就實現了模塊化。

 

• browserify / webpack : 是一個預編譯模塊的方案，相比於上面 ，這個方案更加智能。沒用過browserify，這裏以webpack爲例。首先，它是預編譯的，不須要在瀏覽器中加載解釋器。另外，你在本地直接寫JS，無論是 AMD / CMD / ES6 風格的模塊化，它都能認識，而且編譯成瀏覽器認識的JS。這樣就知道，Gulp是一個工具，而webpack等等是模塊化方案。Gulp也能夠配置seajs、requirejs甚至webpack的插件。

不知道這樣夠清楚了麼？