任务运行器(Gulp，Grunt 等)和 Bundlers (Webpack，Browserify)。为什么要一起使用？

我对于任务运行器和捆绑包的世界还是有点新鲜

咕噜，咕噜，Webpack，Browserify

，我没有觉得他们之间有很大的区别。换句话说，我觉得 Webpack 可以做任务执行器所做的一切。但我仍然得到了一个巨大的例子，其中吞咽和 webpack 一起使用。我不知道为什么。

作为一个新手，我可能会把事情往错误的方向发展。如果你能指出我错过了什么，那就太好了。欢迎任何有用的链接。

先谢谢你。

22627 次浏览
小开
最佳答案

Grunt 和 咕噜实际上是任务运行程序，它们之间存在差异，比如配置驱动任务和基于流的转换。每种方法都有自己的优点和缺点，但是在最后，它们几乎可以帮助您创建可以运行以解决更大的构建问题的任务。大多数情况下，它们与应用程序的实际运行时没有任何关系，而是进行转换或者将文件、配置和其他东西放在适当的位置，以便运行时按照预期工作。有时它们甚至会产生运行应用程序所需的服务器或其他进程。

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

跑步者和捆绑者之间的模糊界限可能是捆绑者也可以在运行时执行复杂的转换或 翻译，因此他们可以做任务跑步者可以做的几件事情。实际上，在 Browserify 和 webpack 之间，可能有大约100个 变压器可以用来修改源代码。相比之下，目前 Npm上至少有2000个吞咽插件。因此，您可以看到，对于什么最适合您的应用程序，有明确的(希望... ;)定义。

也就是说，您可能会看到一个复杂的项目实际上同时使用了任务运行程序和包捆绑包。例如，在我的办公室，我们使用 Gulp 来启动我们的项目，而 webpack 实际上是从一个特定的 Gulp 任务中运行的，这个任务创建了我们需要在浏览器中运行应用程序的源代码包。因为我们的应用程序是 同构的，我们也 bundle some of the server代码。

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

小开

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

它比 Gulp 和 webpack 更容易使用(尽管我从未使用过 webpack)。

它非常简单，有巴别塔，浏览器，丑化，缩小，和车把开箱即用。

语法如下:

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

希望能有所帮助。


提交答案