WebpackとGulpの共存について

Question

ウェブサイト上のチュートリアルや、Github上のスターターキットなどを見ていると、結構みなさん、WebpackとGulpどちらも使用しているのを見かけます。

私の理解では２つともタスクランナー、コンパイラーという認識なのですが違うのでしょうか？
あるチュートリアルでは、Webpackをローカルサーバー構築、Babel対応にだけ使っているのですが、これは二つともGulpで実現可能ですし、タスク監視も容易です。全部Gulpの中で解決した方が簡単だと思います。

WebpackとGulpを共存させる意味とは何なのでしょうか？

Accepted Answer

具体的にそのプロジェクトでどう使い分けてるのか確認してみては？

以下解説を載せておきます。
この前提がある状態でgulpfile.jsを眺めれば気付きを得られるでしょう。

---

WebpackはJS、CSS、HTMLを全て１パッケージにねじ込む事が可能です。
JSだけならGulpでもBrowserify利用で出来るのですが…
この時点で既にGulpでは真似出来ません。

Gulpはpipeによる処理はNode.jsのStreamとは違い、fileという名のオブジェクトをリレーするArray.prototype.mapによる処理に近いものです。
従ってコンパイラ目当てで利用する場合、必ず`gulp-xxx`のライブラリをラッパーとしてかませなければ殆ど何もできません。
要するに依存元のライブラリが更新されたら、gulp-xxxが更新されるまでにタイムラグがあるってことですね、しかもその作者のモチベーション次第で１ヶ月以上余裕で遅れたりする

この辺の事情から、コンパイラとしてのGulpの地位はもう高くないですね。
Webpackとnpm-scriptsが多いんじゃないですかね？

それを踏まえてあえてGulpを採用するということは、
GulpからWebpackを呼んだり、動作確認用のライブリロード鯖
…みたいな使い方になってるのではないでしょうか？