Executores de tarefas (Gulp, Grunt, etc) e Bundlers (Webpack, Browserify). Por que usar juntos?

Eu sou um pouco novo no mundo do task runner e do bundler e, ao passar por coisas como

Grunt, Gulp, Webpack, Browserify

, Não senti que haja muita diferença entre eles. Em outras palavras, acho que o Webpack pode fazer tudo o que um executor de tarefas faz. Mas ainda tenho exemplos enormes em que gulp e webpack são usados ​​juntos. Não consegui descobrir o motivo.

Sendo novo nisso, posso estar levando as coisas na direção errada. Seria ótimo se você pudesse apontar o que estou perdendo. Quaisquer links úteis são bem-vindos.

Desde já, obrigado.

Grunt e Gulp são, na verdade, executores de tarefas e têm diferenças como tarefas orientadas por configuração versus transformações baseadas em fluxo. Cada um tem seus próprios pontos fortes e fracos, mas no final do dia, eles ajudam muito a criar tarefas que podem ser executadas para resolver um problema de construção maior. Na maioria das vezes, eles não têm nada a ver com o tempo de execução real do aplicativo, mas sim transformam ou colocam arquivos, configurações e outras coisas no lugar para que o tempo de execução funcione conforme o esperado. Às vezes, eles até geram servidores ou outros processos de que você precisa para executar seu aplicativo.

Webpack e Browserify são empacotadores de pacotes. Basicamente, eles são projetados para rodar através de todas as dependências de um pacote e concatenar sua fonte em um arquivo que (idealmente) pode ser usado em um navegador. Eles são importantes para o desenvolvimento da web moderno, porque usamos muitas bibliotecas que são projetadas para rodar com Node.js e o compilador v8 . Novamente, existem prós e contras e diferentes motivos pelos quais alguns desenvolvedores preferem um ou outro (ou às vezes ambos!). Normalmente, os pacotes de saída dessas soluções contêm algum tipo de mecanismo de bootstrap para ajudá-lo a obter o arquivo ou módulo correto em um pacote potencialmente grande.

A linha tênue entre os runners e os bundlers pode ser que os bundlers também podem fazer transformações ou transpilações complexas durante o tempo de execução, de modo que podem fazer várias coisas que os executores de tarefas podem fazer. Na verdade, entre o browserify e o webpack, provavelmente há cerca de uma centena de transformadores que você pode usar para modificar seu código-fonte. Para efeito de comparação, há pelo menos 2.000 plugins gulp listados no npm agora. Portanto, você pode ver que há definições claras (espero ...;)) do que funciona melhor para seu aplicativo.

Dito isso, você pode ver um projeto complexo usando executores de tarefas e empacotadores de pacote ao mesmo tempo ou em conjunto. Por exemplo, em meu escritório, usamos o gulp para iniciar nosso projeto e o webpack é, na verdade, executado a partir de uma tarefa gulp específica que cria os pacotes de origem que precisamos para executar nosso aplicativo no navegador. E, como nosso aplicativo é isomórfico , também agrupamos parte do código do servidor .

Na minha humilde opinião, você pode querer se familiarizar com todas essas tecnologias porque é provável que veja (use) todas elas no curso de sua carreira.

Acabei de criar meu próprio executor / empacotador de tarefas.

É mais simples de usar do que gulp e provavelmente webpack (embora eu nunca tenha usado webpack).

É muito simples e tem babel, browserify, uglify, minify e guidão prontos para uso.

A sintaxe é semelhante a esta:

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 o documento está aqui: https://github.com/lingtalfi/Autumn

Espero que ajude.