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

Question

I am a bit new to the task runner and bundler world and while going through things like

Grunt, Gulp, Webpack, Browserify

, I di

Answer 1

I've just created my own task runner/bundler.

It's simpler to use than gulp and probably webpack (although I've never used webpack).

It's very simple and has babel, browserify, uglify, minify, and handlebars out of the box.

The syntax looks like this:

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);

And the doc is here: https://github.com/lingtalfi/Autumn

Hopefully it helps.