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

我对任务运行程序和捆绑程序世界有点陌生，在经历诸如

Grunt，Gulp，Webpack，Browserify

，我觉得两者之间并没有太大区别。换句话说，我觉得Webpack可以完成任务运行者所做的一切。但是仍然有大量示例将gulp和webpack一起使用。我不知道为什么。

对此不熟悉，我可能会朝错误的方向前进。如果您能指出我所缺少的内容，那就太好了。欢迎任何有用的链接。

提前致谢。

Grunt和Gulp实际上是任务运行者，它们之间存在差异，例如配置驱动任务与基于流的转换。每种方法都有其优点和缺点，但归根结底，它们几乎可以帮助您创建可以运行以解决较大构建问题的任务。在大多数情况下，它们与应用程序的实际运行时间无关，而是它们进行转换或将文件，配置和其他内容放置到位，以使运行时间按预期运行。有时，它们甚至生成服务器或运行应用程序所需的其他进程。

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

运行程序和打包程序之间的模糊界限可能是打包程序还可以在运行时执行复杂的转换或转译，因此他们可以执行运行程序任务可以完成的几项工作。实际上，在browserify和Webpack之间，可能有大约一百个转换器可以用来修改源代码。为了进行比较，npm上现在至少列出了2000个gulp插件。因此，您可以看到有一个明确的（希望...;）定义，该定义最适合您的应用程序。

话虽如此，您可能会看到实际上同时或同时使用任务运行程序和程序包捆绑程序的复杂项目。例如，在我的办公室，我们使用gulp启动项目，而webpack实际上是从特定的gulp任务运行的，该任务创建了在浏览器中运行我们的应用程序所需的源包。并且由于我们的应用程序是同构的，因此我们还捆绑了一些服务器代码。

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

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

它比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

希望它会有所帮助。