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

Posted 2023-02-15

【中文标题】任务运行程序（Gulp、Grunt 等）和捆绑程序（Webpack、Browserify）。为啥要一起使用？

【英文标题】：Task Runners (Gulp, Grunt, etc) and Bundlers (Webpack, Browserify). Why use together?任务运行程序（Gulp、Grunt 等）和捆绑程序（Webpack、Browserify）。为什么要一起使用？

【发布时间】：2016-02-07 06:34:55

【问题描述】：

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

之类的事情时

Grunt、Gulp、Webpack、Browserify

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

对于这方面的新手，我可能会走错方向。如果您能指出我所缺少的，那就太好了。欢迎任何有用的链接。

提前致谢。

【参考方案1】：

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

它比 gulp 和 webpack 使用起来更简单（虽然我从未使用过 webpack）。

它非常简单，并且有 babel、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

希望对您有所帮助。

【讨论】：

Ling：我一直使用类和“导入”。您的项目是否会转译导入的文件？

【参考方案2】：

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

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

【讨论】：

我读过的关于 SO 的最佳答案之一，正是我所寻找的。谢谢。也许写一篇博文？

这里你可以得到很好的解释 - survivejs.com/webpack/appendices/comparison