任务运行器（Gulp、Grunt 等）和捆绑器（Webpack、Browserify）。为什么要一起使用？

Grunt 和 Gulp 实际上是任务运行器，它们的区别在于配置驱动任务与基于流的转换。每个都有自己的优点和缺点，但归根结底，它们几乎可以帮助您创建可以运行以解决更大的构建问题的任务。大多数时候，它们与应用程序的实际运行时间无关，而是它们转换或放置文件、配置和其他东西，以便运行时间按预期工作。有时它们甚至会生成运行应用程序所需的服务器或其他进程。

Webpack 和 Browserify 是软件包捆绑器。基本上，它们旨在运行包的所有依赖项，并将它们的源连接到一个文件中，（理想情况下）可以在浏览器中使用。它们对于现代 Web 开发很重要，因为我们使用了许多设计为与 Node.js 和 v8 编译器一起运行的库。同样，有些开发人员更喜欢其中一种（或有时两者兼有！），这也有优缺点和不同的原因。通常，这些解决方案的输出包包含某种引导机制，以帮助您在一个可能很大的包中找到正确的文件或模块。

运行程序和捆绑程序之间的模糊界限可能是捆绑程序还可以在运行时执行复杂的转换或trans-pilations，因此它们可以执行任务运行程序可以做的几件事。事实上，在 browserify 和 webpack 之间可能有大约一百个 transformers 可以用来修改源代码。相比之下，目前 npm 上至少列出了 2000 个 gulp 插件。因此，您可以看到对最适合您的应用程序的定义有明确的（希望... ;)）。

话虽如此，您可能会看到一个复杂的项目实际上同时或串联使用任务运行器和包捆绑器。例如在我的办公室，我们使用 gulp 来启动我们的项目，而 webpack 实际上是从一个特定的 gulp 任务运行的，该任务创建了我们在浏览器中运行我们的应用程序所需的源包。因为我们的应用是 isomorphic，所以我们也 bundle some of the server 编码。

在我看来，你可能想熟悉所有这些技术，因为你很可能会在你的职业生涯中看到（使用）所有这些技术。

---

我刚刚创建了自己的任务运行程序/捆绑程序。

它比 gulp 和可能的 webpack 更易于使用（尽管我从未使用过 webpack）。

它非常简单，并且开箱即用具有 babel、browserify、uglify、minify 和 handlebars。

语法如下所示：

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

希望它有所帮助。

---