Corredores de tareas (Gulp, Grunt, etc.) y Bundlers (Webpack, Browserify). ¿Por qué usar juntos?

Soy un poco nuevo en el mundo de los corredores de tareas y los paquetes y, mientras paso por cosas como

Grunt, Gulp, Webpack, Browserify

, No sentí que hubiera mucha diferencia entre ellos. En otras palabras, creo que Webpack puede hacer todo lo que hace un corredor de tareas. Pero aún así tengo ejemplos enormes en los que gulp y webpack se usan juntos. No pude entender la razón.

Siendo nuevo en esto, podría estar tomando las cosas en la dirección equivocada. Sería genial si pudiera señalar lo que me estoy perdiendo. Cualquier enlace útil es bienvenido.

Gracias por adelantado.

Grunt y Gulp son en realidad ejecutores de tareas, y tienen diferencias como tareas controladas por configuración versus transformaciones basadas en flujo. Cada uno tiene sus propias fortalezas y debilidades, pero al final del día, prácticamente te ayudan a crear tareas que se pueden ejecutar para resolver un problema de compilación más grande. La mayoría de las veces, no tienen nada que ver con el tiempo de ejecución real de la aplicación, sino que se transforman o colocan archivos, configuraciones y otras cosas en su lugar para que el tiempo de ejecución funcione como se esperaba. A veces incluso generan servidores u otros procesos que necesita para ejecutar su aplicación.

Webpack y Browserify son paquetes de paquetes. Básicamente, están diseñados para ejecutar todas las dependencias de un paquete y concatenar su fuente en un archivo que (idealmente) se puede utilizar en un navegador. Son importantes para el desarrollo web moderno, porque usamos muchas bibliotecas que están diseñadas para ejecutarse con Node.js y el compilador v8 . Una vez más, existen pros y contras y diferentes razones por las que algunos desarrolladores prefieren uno u otro (¡oa veces ambos!). Por lo general, los paquetes de salida de estas soluciones contienen algún tipo de mecanismo de arranque para ayudarlo a llegar al archivo o módulo correcto en un paquete potencialmente enorme.

La línea borrosa entre los corredores y los empaquetadores podría ser que los empaquetadores también pueden realizar transformaciones o transilaciones complejas durante su tiempo de ejecución, por lo que pueden hacer varias cosas que los corredores de tareas pueden hacer. De hecho, entre browserify y webpack hay probablemente alrededor de cien transformadores que puedes usar para modificar tu código fuente. A modo de comparación, hay al menos 2000 complementos de gulp enumerados en npm en este momento. Para que pueda ver que hay definiciones claras (con suerte ...;)) de lo que funciona mejor para su aplicación.

Dicho esto, es posible que vea un proyecto complejo que en realidad usa tanto corredores de tareas como agrupadores de paquetes al mismo tiempo o en conjunto. Por ejemplo, en mi oficina, usamos gulp para comenzar nuestro proyecto, y el paquete web en realidad se ejecuta desde una tarea específica de gulp que crea los paquetes fuente que necesitamos para ejecutar nuestra aplicación en el navegador. Y debido a que nuestra aplicación es isomórfica , también incluimos parte del código del servidor .

En mi humilde opinión, es posible que desee familiarizarse con todas estas tecnologías porque es probable que las vea (utilice) todas en el transcurso de su carrera.

Acabo de crear mi propio ejecutor / agrupador de tareas.

Es más simple de usar que gulp y probablemente webpack (aunque nunca he usado webpack).

Es muy simple y tiene babel, browserify, uglify, minify y manubrios listos para usar.

La sintaxis se ve así:

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

Y el documento está aquí: https://github.com/lingtalfi/Autumn

Ojalá te ayude.