Task Runners (Gulp, Grunt, etc.) et Bundlers (Webpack, Browserify). Pourquoi utiliser ensemble?

Je suis un peu nouveau dans le monde des coureurs de tâches et des bundles et en passant par des choses comme

Grunt, Gulp, Webpack, Browserify

, Je n'ai pas senti qu'il y avait beaucoup de différence entre eux. En d'autres termes, je pense que Webpack peut faire tout ce qu'un exécuteur de tâches fait. Mais j'ai quand même d'énormes exemples où gulp et webpack sont utilisés ensemble. Je ne pouvais pas comprendre pourquoi.

Étant nouveau dans ce domaine, je pourrais peut-être prendre les choses dans la mauvaise direction. Ce serait formidable si vous pouviez signaler ce qui me manque. Tous les liens utiles sont les bienvenus.

Merci d'avance.

Grunt et Gulp sont en fait des exécuteurs de tâches, et ils présentent des différences telles que les tâches pilotées par la configuration et les transformations basées sur le flux. Chacun a ses propres forces et faiblesses, mais en fin de compte, ils vous aident à peu près à créer des tâches qui peuvent être exécutées pour résoudre un problème de construction plus important. La plupart du temps, ils n'ont rien à voir avec le temps d'exécution réel de l'application, mais ils se transforment ou mettent en place des fichiers, des configurations et d'autres éléments pour que le temps d'exécution fonctionne comme prévu. Parfois, ils génèrent même des serveurs ou d'autres processus dont vous avez besoin pour exécuter votre application.

Webpack et Browserify sont des bundleurs de packages. Fondamentalement, ils sont conçus pour exécuter toutes les dépendances d'un package et concaténer leur source dans un seul fichier qui (idéalement) peut être utilisé dans un navigateur. Ils sont importants pour le développement Web moderne, car nous utilisons tellement de bibliothèques conçues pour fonctionner avec Node.js et le compilateur v8 . Encore une fois, il y a des avantages et des inconvénients et différentes raisons pour lesquelles certains développeurs préfèrent l'un ou l'autre (ou parfois les deux!). Habituellement, les bundles de sortie de ces solutions contiennent une sorte de mécanismes d'amorçage pour vous aider à accéder au bon fichier ou module dans un bundle potentiellement énorme.

La ligne floue entre les coureurs et les bundlers pourrait être que les bundlers peuvent également effectuer des transformations complexes ou des transpilations pendant leur exécution, afin qu'ils puissent faire plusieurs choses que les exécuteurs de tâches peuvent faire. En fait, entre browserify et webpack, il y a probablement une centaine de transformateurs que vous pouvez utiliser pour modifier votre code source. À titre de comparaison, il y a au moins 2000 plugins gulp répertoriés sur npm en ce moment. Vous pouvez donc voir qu'il existe des définitions claires (espérons-le ...;)) de ce qui fonctionne le mieux pour votre application.

Cela étant dit, vous pourriez voir un projet complexe utilisant à la fois des exécuteurs de tâches et des regroupeurs de packages en même temps ou en tandem. Par exemple, à mon bureau, nous utilisons gulp pour démarrer notre projet, et webpack est en fait exécuté à partir d'une tâche gulp spécifique qui crée les bundles sources dont nous avons besoin pour exécuter notre application dans le navigateur. Et comme notre application est isomorphe , nous regroupons également une partie du code serveur .

À mon humble avis, vous voudrez peut-être vous familiariser avec toutes ces technologies, car il y a de fortes chances que vous les voyiez (les utilisiez) toutes au cours de votre carrière.

Je viens de créer mon propre runner / bundler de tâches.

C'est plus simple à utiliser que gulp et probablement webpack (même si je n'ai jamais utilisé webpack).

C'est très simple et contient babel, browserify, uglify, minify et guidons prêts à l'emploi.

La syntaxe ressemble à ceci:

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

Et la doc est ici: https://github.com/lingtalfi/Autumn

Espérons que cela aide.