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

Question

我对任务运行程序和打包程序世界有点陌生，在经历

之类的事情时

Grunt, Gulp, Webpack, Browserify

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

作为新手，我可能会误入歧途。如果您能指出我遗漏的内容，那就太好了。欢迎任何有用的链接。

提前致谢。

Answer 1

Grunt and Gulp 实际上是任务运行ners，它们之间存在差异，例如配置驱动任务与基于流的转换。每个都有自己的长处和短处，但归根结底，它们几乎可以帮助您创建可以运行解决更大构建问题的任务。大多数时候，它们与应用程序的实际运行时间无关，而是它们转换或将文件、配置和其他东西放在适当的位置，以便运行时间作为预期的。有时，它们甚至会生成您运行您的应用程序所需的服务器或其他进程。

Webpack and Browserify are package bundlers. Basically, they are designed to run through all of a package's dependencies and concatenate their source into one file that (ideally) can be used in a browser. They are important to modern web development, because we use so many libraries that are designed to run with Node.js and the v8 编译器。同样，有些开发人员更喜欢其中一个（或有时两者！），有利有弊，原因也各不相同！通常这些解决方案的输出包包含某种引导机制，以帮助您在一个潜在的巨大包中找到正确的文件或模块。

运行打包者和打包者之间的模糊界限可能是打包者现在也可以进行复杂的转换或 trans-pilations during their run-time, so they can do several things that task runners can do. In fact, between browserify and webpack there's probably around a hundred transformers that you can use to modify your source code. For comparison, there's at least 2000 gulp plugins listed on npm。所以您可以看到，对于什么最适合您的应用程序，有明确的（希望... ;)）定义。

话虽这么说，您可能会看到一个复杂的项目实际上同时或串联使用了任务运行ner 和包打包器。例如在我的办公室，我们使用 gulp 来启动我们的项目，而 webpack 实际上是运行来自特定的 gulp 任务，该任务创建我们需要运行的源包我们在浏览器中的应用程序。因为我们的应用程序是 isomorphic, we also bundle some of the server 代码。

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

Answer 2

我刚刚创建了自己的任务runner/bundler。

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

希望对您有所帮助。

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

Task Runners (Gulp, Grunt, etc) and Bundlers (Webpack, Browserify). Why use together?

gruntjs

gulp

bundler

browserify

webpack