私はタスクランナーとバンドラーの世界では少し新しいです。
Grunt、Gulp、Webpack、Browserify
、両者に大きな違いがあるとは感じませんでした。言い換えれば、Webpackはタスクランナーが行うすべてのことを実行できると感じています。しかし、それでもgulpとwebpackが一緒に使用されている巨大な例がありました。理由が分からなかった。
これが初めてなので、間違った方向に進んでいる可能性があります。あなたが私が欠けているものを指摘することができればそれは素晴らしいでしょう。役立つリンクがあれば大歓迎です。
前もって感謝します。
回答:
GruntとGulpは実際にはタスクランナーであり、構成主導のタスクとストリームベースの変換のような違いがあります。それぞれに長所と短所がありますが、結局のところ、より大きなビルドの問題を解決するために実行できるタスクを作成するのに役立ちます。ほとんどの場合、アプリの実際の実行時間とは何の関係もありませんが、変換が行われるか、ファイル、構成、その他のものが配置され、実行時間が期待どおりに機能します。時には、アプリを実行するために必要なサーバーやその他のプロセスを生成することもあります。
WebpackとBrowserifyはパッケージバンドルです。基本的に、それらはパッケージのすべての依存関係を実行し、ソースを（理想的には）ブラウザーで使用できる1つのファイルに連結するように設計されています。Node.jsとv8コンパイラーで実行するように設計された非常に多くのライブラリーを使用するため、これらは現代のWeb開発にとって重要です。繰り返しますが、長所と短所があり、開発者によってはどちらか一方（または両方）が好まれる場合があります。通常、これらのソリューションの出力バンドルには、潜在的に巨大なバンドル内の適切なファイルまたはモジュールに到達するのに役立つ、ある種のブートストラップメカニズムが含まれています。
ランナーとバンドラーのあいまいな線は、バンドルャーがランタイム中に複雑な変換やピラミッド変換を実行できるため、タスクランナーが実行できるいくつかのことを実行できることを示している可能性があります。実際、browserifyとwebpackの間には、ソースコードの変更に使用できるトランスフォーマーが約100あります。比較のために、現在npmには少なくとも2000のgulpプラグインがリストされています。したがって、アプリケーションに最適なものの明確な（うまくいけば...;））定義があることがわかります。
そうは言っても、実際にタスクランナーとパッケージバンドルの両方を同時にまたはタンデムに使用する複雑なプロジェクトを目にする可能性があります。たとえば、私のオフィスでは、gulpを使用してプロジェクトを開始します。実際に、webpackは、ブラウザーでアプリを実行するために必要なソースバンドルを作成する特定のgulpタスクから実行されます。また、アプリは同型であるため、サーバーコードの一部もバンドルしています。
私の控えめな意見では、あなたはこれらのテクノロジーのすべてに慣れることを望むかもしれません。なぜなら、あなたはあなたのキャリアの過程でそれらすべてを見る（使用する）からです。
自分のタスクランナー/バンドラーを作成しました。
gulpやおそらくwebpackよりも使用する方が簡単です（私はwebpackを使用したことがありませんが）。
それは非常にシンプルで、バベル、browserify、uglify、minify、およびハンドルバーが標準で備わっています。
構文は次のようになります。
const Autumn = require("autumn-wizard");
const w = new Autumn();
//----------------------------------------
// CSS
//----------------------------------------
var cssFiles = [
'./lib/pluginABC/src/css/**/*.{css,scss}',
];
w.forEach(cssFiles, srcPath => {
var dstPath = w.replace('/src/', '/dist/', srcPath);
dstPath = w.replace('.scss', '.css', dstPath);
dstPath = w.replace('.css', '.min.css', dstPath);
w.minify(srcPath, dstPath, {
sourceMap: useSourceMap,
});
});
//----------------------------------------
// BUNDLE THE JS MODULE
//----------------------------------------
var srcPath = "./lib/pluginABC/src/main.js";
var dstPath = "./lib/pluginABC/dist/bundled.min.js";
w.bundle(srcPath, dstPath, {
debug: useSourceMap,
});
//----------------------------------------
// CREATE THE HANDLEBARS TEMPLATES
//----------------------------------------
var tplPaths = [
"./lib/pluginABC/src/templates/**/*.hbs",
];
dstPath = "./lib/pluginABC/dist/templates/bundled.js";
w.precompile(tplPaths, dstPath);
そして、ドキュメントはここにあります：https：//github.com/lingtalfi/Autumn
うまくいけば、それが役立ちます。