[解決済み] タスクランナー（Gulp, Gruntなど）とバンドラー（Webpack, Browserify）。なぜ一緒に使うのか？

疑問点

私はタスクランナーやバンドラーの世界では少し初心者で、以下のようなことを調べているところです。

Grunt、Gulp、Webpack、Browserify。

WebpackとGruntの違いは、あまり感じませんでした。つまり、Webpackはタスクランナーが行うことをすべて行うことができると感じています。しかし、それでもgulpとwebpackを一緒に使う例が大量にありました。その理由がわからなかったのです。

初心者なので、間違った方向に物事を進めているかもしれません。私が見逃しているものを指摘していただけると助かります。有用なリンクがあれば歓迎します。

ありがとうございました。

どのように解決するのですか？

Grunt と Gulp は実際にはタスクランナーであり、設定駆動タスクとストリームベースの変換のような違いがあります。 それぞれに長所と短所がありますが、結局のところ、これらは大きなビルドの問題を解決するために実行できるタスクを作成するのに役立ちます。ほとんどの場合、アプリの実際のランタイムとは関係なく、ランタイムが期待通りに動作するように変換したり、ファイルや設定、その他のものを所定の位置に配置したりします。 時には、アプリを実行するために必要なサーバーやその他のプロセスを生成することさえあります。

ウェブパック と ブラウザ化 はパッケージバンドルツールです。 基本的には、パッケージのすべての依存関係を実行し、そのソースを (理想的には) ブラウザで使用できる 1 つのファイルに連結するように設計されています。 現代のウェブ開発では、このバンドルが重要です。 Node.js と v8 コンパイラがあります。 ここでも長所と短所があり、開発者によってはどちらか一方を好む (あるいは両方を好む!) 異なる理由があります。 通常、これらのソリューションの出力バンドルには、潜在的に巨大なバンドル内の正しいファイルまたはモジュールに到達するのを助けるために、ある種のブートストラップ機構が含まれています。

ランナーとバンドラーの間の境界が曖昧なのは、バンドルが複雑な変換をしたり、あるいは トランスパレーション を実行することができるため、タスクランナーができることのいくつかを行うことができます。 実際、browserify と webpack の間には、おそらく約 100 種類の トランスフォーマー があり、ソースコードを変更するために使用できます。 比較のために、少なくとも 2000 の gulp プラグインが npm に登録されています。 ですから、何があなたのアプリケーションに最適なのか、明確な（できれば...）定義があることがおわかりいただけると思います。

とはいえ、複雑なプロジェクトでは実際にタスクランナーとパッケージバンドラーの両方を同時に、あるいは並行して使用しているのを見ることがあるかもしれません。 たとえば、私のオフィスでは、プロジェクトを開始するために gulp を使用し、ブラウザでアプリを実行するために必要なソース バンドルが作成される特定の gulp タスクから webpack が実際に実行されます。 そして、私たちのアプリは 同型 であるため、私たちも サーバーの一部をバンドルして のコードもバンドルしています。

私の率直な意見としては、これらの技術すべてに精通することをお勧めします。なぜなら、あなたのキャリアの過程でこれらすべてを目にする（使用する）可能性があるからです。