Grunt和Gulp实际上是任务运行器，它们之间的区别就像配置驱动的任务和基于流的转换一样。每一个都有自己的优缺点，但最终，它们几乎可以帮助你创建可以运行的任务来解决更大的构建问题。大多数时候，它们与应用的实际运行时无关。而是转换或放置文件、配置和其他东西，以便运行时按预期工作。有时候，它们甚至会生成运行应用所需的服务器或其他进程。
Webpack和Browserify是软件包捆绑器。基本上，它们被设计为遍历软件包的所有依赖项，并将它们的源代码连接到一个文件中，该文件（理想情况下）可以在浏览器中使用。它们对于现代Web开发非常重要，因为我们使用了许多设计用于Node.js和v8编译器的库。同样，有优点和缺点，以及不同的原因，一些开发人员喜欢其中一个或另一个（有时两个都喜欢）。2通常，这些解决方案的输出包包含某种引导机制，帮助您在一个可能很大的包中找到正确的文件或模块。
runner和bundlers之间的模糊界限可能是bundlers也可以在运行时进行复杂的转换或trans-pilations，因此它们可以做一些任务runner可以做的事情。事实上，在browserify和webpack之间，可能有大约100个transformers可以用来修改源代码。现在在npm上至少有2000个gulp插件，所以你可以看到有明确的（希望......）））定义什么最适合您的应用程序。
话虽如此，你可能会看到一个复杂的项目实际上同时使用任务运行器和包捆绑器，或者两个同时使用。例如，在我的办公室，我们使用gulp启动我们的项目，webpack实际上是从一个特定的gulp任务运行的，这个任务创建了我们在浏览器中运行应用所需的源代码包。因为我们的应用是isomorphic，我们也使用bundle some of the server代码。
依我的拙见，您可能希望熟悉所有这些技术，因为在您的职业生涯中，您很可能会看到（使用）所有这些技术。

我刚刚创建了自己的任务管理器/捆绑器。
它比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
希望能有所帮助。