Question

我对任务运行器和捆绑器世界有点新意，并且经历了像

这样的事情

Grunt，Gulp，Webpack，Browserify

，我觉得它们之间没有太大区别。换句话说，我觉得Webpack可以完成任务运行员所做的一切。但是我仍然有一个巨大的例子，其中gulp和webpack一起使用。我无法弄清楚原因。

对此我不熟悉，我可能会采取错误的方向。如果你能指出我所缺少的东西，那就太好了。欢迎任何有用的链接。

提前致谢。

Answer 1

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代码。

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

Answer 2

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

使用它比gulp和webpack更为简单（尽管我从未使用过webpack）。

这非常简单，并且开箱即可使用babel，browserify，uglify，minimize和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

希望它会有所帮助。

任务运行者（Gulp，Grunt等）和Bundlers（Webpack，Browserify）。为什么一起使用？

2 个答案: