タスクランナー（Gulp、Gruntなど）およびバンドラー（Webpack、Browserify）。なぜ一緒に使用するのですか？
私はタスクランナーとバンドラーの世界に少し慣れており、
Grunt、Gulp、Webpack、Browserify
、私はそれらの間に大きな違いがあるとは感じませんでした。言い換えれば、Webpackはタスクランナーが行うすべてを実行できると感じています。しかし、gulpとwebpackが一緒に使用される巨大な例があります。その理由がわかりませんでした。
これは初めてなので、間違った方向に物事を取っているかもしれません。あなたが私が行方不明になっていることを指摘できれば、それは素晴らしいことです。便利なリンクは大歓迎です。
前もって感謝します。
Grunt および Gulp は実際にはタスクランナーであり、設定ベースのタスクとストリームベースの変換のような違いがあります。それぞれに長所と短所がありますが、1日の終わりには、大きなビルドの問題を解決するために実行できるタスクを作成するのに役立ちます。ほとんどの場合、アプリの実際の実行時とは関係ありませんが、変換が行われるか、ファイル、構成などを適切に配置して、実行時が期待どおりに機能するようにします。時には、アプリケーションを実行するために必要なサーバーや他のプロセスを生成することさえあります。
Webpack および Browserify はパッケージバンドルです。基本的に、パッケージのすべての依存関係を実行し、ソースを1つのファイルに連結して（理想的には）ブラウザーで使用できるように設計されています。 Node.js および v8 コンパイラーで実行するように設計された非常に多くのライブラリーを使用するため、これらは最新のWeb開発にとって重要です。繰り返しになりますが、長所と短所があり、一部の開発者がどちらか（または両方！）を好む開発者もいます。通常、これらのソリューションの出力バンドルには、潜在的に巨大なバンドル内の適切なファイルまたはモジュールに到達するのに役立つある種のブートストラップメカニズムが含まれています。
ランナーとバンドラーのあいまいな境界線は、バンドラーが実行時に複雑な変換または trans-pilations を実行できるため、タスクランナーが実行できるいくつかのことを実行できることです。実際、browserifyとwebpackの間には、おそらくソースコードの変更に使用できる transformers が約100個あります。比較のために、少なくとも2000個のgulpプラグインが npm にリストされています。そのため、アプリケーションに最適なものの定義が明確に（できれば...;））あることがわかります。
そうは言っても、タスクランナーとパッケージバンドラーの両方を同時にまたは並行して実際に使用している複雑なプロジェクトを見るかもしれません。たとえば、私のオフィスでは、gulpを使用してプロジェクトを開始します。webpackは、ブラウザーでアプリを実行するために必要なソースバンドルを作成する特定のgulpタスクから実際に実行されます。また、アプリは 同形 であるため、 サーバーの一部をバンドル コードも使用します。
私の謙虚な意見では、これらの技術のすべてに精通したいと思うかもしれません。なぜなら、あなたはあなたのキャリアの中でそれらすべてを見る（使用する）可能性があるからです。