Task Runners (Gulp, Grunt, ecc.) E Bundlers (Webpack, Browserify). Perché usare insieme?

Sono un po 'nuovo nel mondo dei task runner e bundler e mentre sto affrontando cose come

Grunt, Gulp, Webpack, Browserify

, Non ho sentito che ci fosse molta differenza tra loro. In altre parole, sento che Webpack può fare tutto ciò che fa un task runner. Ma ho ancora un enorme esempio in cui gulp e webpack vengono usati insieme. Non riuscivo a capire il motivo.

Essendo nuovo a questo, potrei prendere le cose nella direzione sbagliata. Sarebbe fantastico se tu potessi sottolineare cosa mi manca. Eventuali link utili sono i benvenuti.

Grazie in anticipo.

Grunt e Gulp sono in realtà task runner e hanno differenze come le attività guidate dalla configurazione rispetto alle trasformazioni basate sul flusso. Ognuno ha i suoi punti di forza e di debolezza, ma alla fine della giornata, ti aiutano praticamente a creare attività che possono essere eseguite per risolvere un problema di costruzione più ampio. La maggior parte delle volte, non hanno nulla a che fare con il tempo di esecuzione effettivo dell'app, ma piuttosto trasformano o inseriscono file, configurazioni e altre cose in modo che il tempo di esecuzione funzioni come previsto. A volte generano anche server o altri processi di cui hai bisogno per eseguire la tua app.

Webpack e Browserify sono pacchetti di pacchetti. Fondamentalmente, sono progettati per eseguire tutte le dipendenze di un pacchetto e concatenare la loro origine in un file che (idealmente) può essere utilizzato in un browser. Sono importanti per lo sviluppo web moderno, perché utilizziamo così tante librerie progettate per funzionare con Node.js e il compilatore v8 . Ancora una volta, ci sono pro e contro e diversi motivi per cui alcuni sviluppatori preferiscono l'uno o l'altro (o talvolta entrambi!). Di solito i bundle di output di queste soluzioni contengono una sorta di meccanismi di bootstrap per aiutarti a ottenere il file o il modulo giusto in un bundle potenzialmente enorme.

La linea sfocata tra runner e bundler potrebbe essere che i bundler possono anche eseguire trasformazioni complesse o traspilazioni durante il loro tempo di esecuzione, quindi possono fare diverse cose che i task runner possono fare. Infatti, tra browserify e webpack ci sono probabilmente un centinaio di trasformatori che puoi usare per modificare il tuo codice sorgente. Per fare un confronto, ci sono almeno 2000 plugin gulp elencati su npm in questo momento. Quindi puoi vedere che ci sono definizioni chiare (si spera ...;)) di ciò che funziona meglio per la tua applicazione.

Detto questo, potresti vedere un progetto complesso che utilizza effettivamente sia i task runner che i pacchetti di pacchetti contemporaneamente o in tandem. Ad esempio nel mio ufficio, utilizziamo gulp per avviare il nostro progetto e webpack viene effettivamente eseguito da un'attività specifica di gulp che crea i bundle di origine di cui abbiamo bisogno per eseguire la nostra app nel browser. E poiché la nostra app è isomorfa , includiamo anche parte del codice del server .

A mio modesto parere, potresti voler familiarizzare con tutte queste tecnologie perché è probabile che le vedrai (userai) tutte nel corso della tua carriera.

Ho appena creato il mio task runner / bundler.

È più semplice da usare di gulp e probabilmente webpack (anche se non ho mai usato webpack).

È molto semplice e ha babel, browserify, uglify, minify e handlebars fuori dagli schemi.

La sintassi è simile a questa:

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

E il documento è qui: https://github.com/lingtalfi/Autumn

Si spera che aiuti.