WebpackとGulpの違いについて

Question

WebpackとGulpの違いを調べていた所、Webpack は browserify みたいに「複数ファイルを1つのjsファイルにまとめるもの」 という記事を拝見しました。

Gulp でも browserify を使用すれば同じ事が出来るのに何故あえて Webpack を使う必要があるのでしょうか。

また、gulpはタスクランナーで、複数の作業を決まった順番で行ったりできます。という説明もみたのですが、Webpack でもプラグインを入れれば、Gulpと同じようにタスクランナーとして使用することも出来るかと思います。

Webpack と Gulp は具体的にどのような違いがあって、どのようなメリットデメリットがあるのでしょうか。

よろしくお願いいたします。

Answer 1

タスクランナーとはコードで定義したタスクをコマンド一撃で実行してくれるものを指しますが、
一般的にGulpに求めるタスクはPugやSASSのコンパイルや、JSファイルの結合くらいの事でしょう。

つまり、身も蓋もない言い方をしてしまえば、
GulpとWebpackは一般的なやりたい要望としては同じようなもんなので、
どちらを選んでも殆ど変わらない程度の違いしかありません。

---

あえて違いを述べるとするならば、
Webpackは「複数ファイルを1つのjsファイルにまとめるもの」に特化しているツールです。

Webpackが使われているならbundle.jsをどこかで生成するところがゴールにきまっているので、
興味が出てきたらconfigファイルを斜め読みすれば事足ります。

対するGulpはgulpfile.jsに記述したタスクを実行していくだけですので、
タスク作った本人はそれで良いとしても、新たにジョインしたメンバーはpackage.jsonやgulpfile.jsをエディタで開いて中身を読まない事には何やってるかさっぱり分からないでしょう。

もちろんGulpにはファイルを見張ってライブリロードするんだ〜みたいなトリッキーな事も得意ですから、
魔改造するならGulpの方が良いかもしれませんね。

Answer 2

gulpはタスクランナーで、複数の作業を決まった順番で行ったりできます。

この説明のとおりで、gulp単体では何もできません。gulpは「他のツールを呼び出して制御する」ためのツールです。

Comments

[maisumakun]

すでにgulpでワークフローができている場合には、「gulpからWebpackを呼び出す」という選択肢もあります。