gulp 有哪些功能是 webpack 不能替代的？

剛剛開始學習React，然後就聽說了webpack，於是也聽說了gulp但還沒學習怎麼用。

大家都說webpack和gulp不是一類工具，不適合在一起比較，也說他們功能有重疊。

但都說得比較含糊。

請問兩者有哪些功能是重疊的？

哪些功能是不能被對方替代的？

在何種情況下用哪個工具更好？

---

gulp 是 task runner，Webpack 是 module bundler。可以這麼說， Webpack 和 gulp 本身都有 95% 的功能是不能被對方替代，或者直接說和對方不重疊的。

gulp 最核心的功能：

1. 任務定義和組織；
2. 基於文件 stream 的構建；
3. 插件體系；

gulp 本身對具體的構建任務可以沒有任何的要求。但通常是文件流操作。

當然也可以編寫 gulp 任務來啟動伺服器，打開瀏覽器，調用ssh/ftp發布生產伺服器等等，筆者挺反對這種什麼事情都交給 gulp 來做的方式，gulp 更多的還是集中在構建這一塊。

可以這麼說，gulp 適合於任何基於 JavaScript 構建的場合，無論是前端還是後端（Node.js）；甚至可以在 gulp 里直接調用 Webpack 呀：

var webpack = require("gulp-webpack");
gulp.task("default", function() {
return gulp.src("src/entry.js")
.pipe(webpack())
.pipe(gulp.dest("dist/"));
});


webpack 最核心的功能：

1. 按照模塊的依賴構建目標文件；
2. loader 體系支持不同的模塊；
3. 插件體系提供更多額外的功能；

上張官方的 what-is-webpack.png:

圖裡已經表達清楚了:

1. 需要把各種資源（js/ts/css/html/ejs/img/fonts等等）都看成 module；
2. module 之間必須是互相依賴的，在 js 里 import 模板、圖片、樣式文件等等，樣式文件通過 url() 和圖片字體關聯；這種依賴關係必須是 webpack 既定的或者是通過插件可以理解的關係。

Webpack 的核心就是模塊化地組織，模塊化地依賴，然後模塊化地打包。相對來上，場景局限在前端模塊化打包上；雖然用 gulp + 插件的方式也能實現，但目前看 Webpack 在依賴的模塊化構建上是無人能夠替代的。

其他答主提到的熱替換，也只是 Webpack 的附加功能，也不是所有的組件都可以熱替換不刷新。

請問兩者有哪些功能是重疊的？

基於模塊依賴的構建這方面，雖然 gulp 也可以實現，但交給更專業的 Webpack 來做；甚至可以使用 shama/webpack-stream 來把 Webpack 封裝成 gulp 任務；

其他功能，例如文件壓縮，Webpack 也有自己的 UglifyJsPlugin 插件，gulp 也有 gulp-uglify，通常答主會選擇 gulp 來實現，因為 gulp 除此之外還有更多的比如 CSS 壓縮，圖片壓縮等等可用；

哪些功能是不能被對方替代的？

Webpack 之前，做模塊化依賴構建的有 Browserify。可以使用 Browserify 的 gulp 插件 deepak1556/gulp-browserify 結合上 Browserify 的插件 substack/node-browserify 實現 Webpack 提供的基於模塊依賴的構建。只是 Webpack 功能完善更強大，所以這方面的事情，交給 Webpack 搞。

核心功能無法替代，gulp 任務定義和管理 Webpack 做不到，Webpack 基於模塊的依賴構建 gulp 做不好。舉幾個例子：

用 gulp-rev-all 來做所有資源引用的版本號替換：

gulp.task("build", function () {
var revAll = new RevAll({
prefix: "http://xxxxx.clouddn.com",
dontRenameFile: [".html", ".xml", ".md", ".yml", ".ico"],
dontUpdateReference: [".html", ".xml", ".md", ".yml", ".ico"]
})
return gulp.src("dist/**")
.pipe(revAll.revision())
.pipe(gulp.dest("rev"))
})


我可以用 gulp-qiniu 來把靜態文件直接發布到七牛的 CDN：

gulp.task("qiniu", function () {
return gulp.src([
"rev/css/**",
"rev/fonts/**",
"rev/js/**",
"rev/images/**"
], {base: "rev"})
.pipe(qiniu({
accessKey: qiniuConfig.accessKey,
secretKey: qiniuConfig.secretKey,
bucket: "qianduan",
private: false
}, {
dir: "/",
concurrent: 10
}))


這兩個工作，在我的場景下需要，Webpack 並做不了。當然你也可以用其他工具來實現，我管不了。

在何種情況下用哪個工具更好？

除了前端模塊化開發，模塊之間充分依賴的項目，都不值得用 Webpack 去構建。反之，如果要用 Webpack，請確保模塊化，模塊之間充分依賴。除此之外的構建工作，都應該交給 gulp 繼續完成。目前大點的項目，Webpack 和 gulp 都是同時存在的，只是各自負責擅長的那部分，比如 Webpack 將模塊的、互相依賴的分散的代碼打包成數個文件，然後再使用 gulp 任務去做壓縮，加版本號，替換等等其他工作。

---

Webpack 還是作為一個 module bundler 存在，它沒有暴露過多的文件處理細節，用戶用 webpack 是寫配置。

而 gulp 則是 vinyl stream 為王，用戶使用時要寫task，載入組件、一步一步地處理 stream，gulp file 里需要你自己寫的代碼量多一些，細節很多很煩，但只要你把 vinyl stream 搞明白了，一通全通。

你一天可以大概學會用 最基本的 webpack，但背後的細節完全抓瞎，配置項很多，當你需要某個功能的時候可能你連改哪個配置都不知道。

而同樣是一天時間，你看完了 vinyl stream，那基本上所有的 gulp task、plugin 你就全明白了，想做啥做啥。

如果需要短平快，用 webpack 是比較省事的，基本上不需要在構建上花太多精力，而且能輕鬆擁有 dev server、hot reload 等等特性，而且它用來構建 React 項目非常方便，但它能做的事情就比較固定，能控制的細節不多。如果需要面面俱到不怕麻煩，gulp是個不錯的選擇。

---

webpack 主要以entry文件為入口形成的依賴鏈，對依賴文件的類型，進行監聽，loader任務，打包合併，專業處理打包各種規範模塊。

gulp 主要以監聽物理目錄下文件，執行進行配置的任務流。

最佳實踐是gulp負責工作流生命周期裡面的樣式圖片等資源整理合併，webpack負責腳本模塊打包合併（組件開發）。

當然，對於react或者vue等類似的組件化開發方式，webpack足矣

---

謝邀。

其實這種問題還是通過自己實踐得到答案更好。

這些工具功能上肯定有重合，因為要做的事情就是那些。

不同的是有些工具擅長做某些事情，且用起來非常簡單。

建議將工程上常用的功能用Webpack和Gulp都做一遍。從需求入手。

比如，代碼合併、壓縮混淆、版本號、編譯出錯提示等等。

二者不是只能選其一使用。還有FIS3也去了解一下。擇其所長而用之。

私貨：

認識Webpack這是之前學習Webpack的學習筆記，記錄了我的入門思路。

帶著問題去認識一個新的工具。將一個個問題逐個解決，然後再串起來重新認識。

看看源碼很有幫助。

---

你可以看看這個項目 este/este，gulp 和 webpack 都用到，還都比較深入。面向任務的工作由 gulp 來做，例如啟動個服務，清理個目錄；面向模塊依賴（模塊打包，切割，注入）的則有 webpack 來做。

---

謝邀

我就說說我的理解好了，可能並不專業。

webpack是一個打包工具，以 entry 為入口，require不同的文件，調用不同的loader，然後打包。

gulp是一個平台，你可以用各種gulp的插件組裝成你想要的task，平台的意思是只要按照gulp的規則來寫插件，就能做對應的事情。webpack、seajs、browserify等都有gulp插件，對應打包這個工作；可以在gulp中watch文件調用browser-sync，對應reload這個工作；可以在gulp中調用less插件，編譯成css。

但是，並不是說gulp比webpack強大，webpack自帶reload，也有各種plugins。

好像什麼也沒說。。總之，依照自己的情況選擇吧，gulp上手快，webpack學習比較陡峭。也可以一起使用，不過在項目中，這種東西使用越少越好，要不容易把自己搞亂。

---

首先感謝邀請。

在我的理解中，gulp 是作為一個 task runner 存在的。用戶可以預先定義好一系列的 task，定義好這些 task 分別做些什麼，然後定義好執行順序，最後由 gulp 來執行這些 task。所以 gulp 可以做到幾乎所有 node 能做到的事情，不僅僅是用來打包 js 等。

而 webpack 功能就相對比較單一，就是打包 js 文件，css 文件等。也有插件可以用來生成 html。不過總的來說，webpack 更多的是用來打包前端代碼。而且就像其它回答里說的， webpack 並不暴露文件處理的細節，你只是把一堆文件丟給它，告訴它用什麼 loader 來處理什麼文件，然後就可以等著輸出了。

在我的工作流程里，通常都是用 gulp 來調用 webpack 來打包 js 等文件，然後拷貝一些資源文件到輸出目錄，比如圖片、字體等。因為 webpack 沒有文件處理細節，有時候圖片等資源文件需要一些額外處理的時候就沒辦法了。

---

先說重點：webpack 是一個打包工具，gulp 是一個自動化工具。

webpack 是用來把你的源文件打包成一個文件的，你做了一系列配置以後，可以用一句 webpack 實現打包的功能。

gulp 是用來實現自動化的，你寫了一堆任務之後，可以用一句 gulp 執行你所需要的所有任務。

形象一點解釋：gulp是微信，webpack是京東。京東可以有自己的網站，也可以有微信公眾號；微信可以有很多公眾號。

需要注意的是，gulp 本身，不載入任何包的話，什麼事情都做不了。

• 如果你在 gulp 里只載入了 webpack，那麼此時 gulp 的作用 === webpack 的作用；

• 如果你 gulp 里沒有載入 webpack，雖然還可以由一些其它工具實現打包，但打包的方式不同於 webpack，所以此時 gulp ∩ webpack = ?；

• 而如果你的 gulp 載入了 webpack 和別的包，那麼此時 webpack ∈gulp。

拿例子來說（偽代碼），gulp 依次執行這三個 task，其中 task2 等於 webpack：

// gulp 有的，webpack 沒有的部分
task1 = function(){
require("seajs");
seajs();
}
// 等於 webpack
task2 = function(){
require("webpack");
webpack();
}
// gulp 有的，webpack 沒有的部分
task3 = function(){
console.log(3);
}


我的說明和例子有些狹隘，webpack 還能實現很多功能。但總體來說，gulp 可以擁有完整的 webpack，也可以實現相似的替代的方案，反之則不行。

以上。

---

gulp和webpack？這兩東西...根本就是做不同的事啊。

gulp好比Unix世界的make和Java世界的ant，用於尋找不同任務之間的依賴關係，找到正確的執行順序，基本上什麼任務都可以做，包括webpack任務。

webpack的作用是從若干個文件開始順藤摸瓜，根據文件之間的引用關係找到所有相關文件，把他們打包到若干打包文件里。

這兩個根本做的是不同的事情。

---

任務流的部署，對於線上/debug等不同環境的不同流程配置優化，webpack更像是資源的模塊化打包；

---

兩種不同看待事物和處理事物的方式。

如果思維是文件、任務、步驟方式的，就用gulp。

如果思維能認同webpack的一切皆模塊的思維，那就用webpack。

在使用webpack的時候，大部分情況下都能只使用webpack。npm script配合webpack基本是夠用的。相對來說，webpack內處理文件的md5問題，比gulp容易。

---

個人感覺，兩者沒有太大的差別，只是說gulp相對來說的話，上手更快，webpack的配置項有點兒多，雖然會用，但是裡面的依賴卻有些不太深懂

---

gulp 和wbepack 兩者結合起來還是挺不錯的

---

經歷了從grunt到gulp再到webpack的過程。

不說什麼任務流工具還是模塊打包工具，自己一直都是在做模塊化前端開發，我對工具的關注點有兩處:

1.易上手。其實都差不多，grunt和webpack都是配置式，gulp語法靈活。

2.生態好。當初grunt用的也很爽，出了gulp之後，逐漸往gulp過渡，才發現gulp周邊插件質量讓我擔憂。不用吧，沒更好的，用吧，人氣不足。一個requirejs的打包插件用起來費勁的一批。gulp-handlebars也是自己又擴展了一些功能，才用起來跟grunt-handlebars差不多了。最後就是gulp代碼寫起來多的一批。完全不能直視。搞一個文件版本hash和html引用替換，又

是一大坨代碼。除了自定義任務功能很方便，其它的也就那樣吧。

最後，我還是用了webpack，webpack大法基本還好，配上npm scripts就足夠處理日常的前端開發工作了。

---

我個人比較喜歡組合使用gulp和webpack，webpack是一個module bundler，擅長模塊化一切資源；gulp是一個任務化工具，擅長流程化一切事情，強強組合，各自做自己擅長的事情，何樂而不為呢！

---

現在把項目簡化到不用task runner

但是webpack還是得用

---

給個不是特別恰當的類比:

| Imperative | Declarative

Java | Ant | Maven

JavaScript | grunt/gulp | Webpack

---

答案里的回答是否跑題了？？？

至少從我目前的工作來看，gulp已經被棄用了......也就是說在我目前的工作中，沒有gulp所擁有的功能webpack不能替代.......

---

『聽說了webpack，於是也聽說了gulp但還沒學習怎麼用。』

自己動手搭兩個項目環境就知道了，紙上得來終覺淺，絕知此事要躬行。你現在都只是聽說的階段，看大家的總結也未必能理解多少。

---

支持grunt

webpack在我看來只是一個task而已

並不具備全局打包的能力

難道你的項目裡面就真的只有一個spa頁面？

---

推薦閱讀：