Task Runners (Gulp, Grunt usw.) und Bundler (Webpack, Browserify). Warum zusammen verwenden?

Ich bin ein bisschen neu in der Welt der Task Runner und Bundler und während ich Dinge wie durchlaufe

Grunzen, Schlucken, Webpack, Browserify

Ich hatte nicht das Gefühl, dass es einen großen Unterschied zwischen ihnen gibt. Mit anderen Worten, ich bin der Meinung, dass Webpack alles kann, was ein Task Runner tut. Trotzdem habe ich große Beispiele, bei denen Schluck und Webpack zusammen verwendet werden. Ich konnte den Grund dafür nicht herausfinden.

Da ich neu in diesem Bereich bin, gehe ich möglicherweise in die falsche Richtung. Es wäre großartig, wenn Sie darauf hinweisen könnten, was mir fehlt. Alle nützlichen Links sind willkommen.

Danke im Voraus.

Grunt und Gulp sind eigentlich Task-Runner und weisen Unterschiede zwischen konfigurationsgesteuerten Tasks und Stream-basierten Transformationen auf. Jedes hat seine eigenen Stärken und Schwächen, aber letztendlich helfen sie Ihnen dabei, Aufgaben zu erstellen, die ausgeführt werden können, um ein größeres Build-Problem zu lösen. Meistens haben sie nichts mit der tatsächlichen Laufzeit der App zu tun, sondern transformieren oder platzieren Dateien, Konfigurationen und andere Dinge, damit die Laufzeit wie erwartet funktioniert. Manchmal erzeugen sie sogar Server oder andere Prozesse, die Sie zum Ausführen Ihrer App benötigen.

Webpack und Browserify sind Paketbündler. Grundsätzlich sind sie so konzipiert, dass sie alle Abhängigkeiten eines Pakets durchlaufen und ihre Quelle zu einer Datei verketten, die (idealerweise) in einem Browser verwendet werden kann. Sie sind wichtig für die moderne Webentwicklung, da wir so viele Bibliotheken verwenden, die für die Ausführung mit Node.js und dem v8- Compiler ausgelegt sind. Auch hier gibt es Vor- und Nachteile und verschiedene Gründe, warum manche Entwickler das eine oder andere bevorzugen (oder manchmal beides!). Normalerweise enthalten die Ausgabepakete dieser Lösungen eine Art Bootstrapping-Mechanismus, mit dem Sie die richtige Datei oder das richtige Modul in einem potenziell großen Paket finden.

Das verschwommene Linie zwischen Läufer und Bündler könnte sein , dass Bündler auch komplexe Transformationen tun kann , oder trans-pilations während ihrer Laufzeit, so dass sie mehrere Dinge tun können , die Aufgabe Läufer tun können. Tatsächlich gibt es zwischen browserify und webpack wahrscheinlich rund hundert Transformatoren , mit denen Sie Ihren Quellcode ändern können. Zum Vergleich: Derzeit sind mindestens 2000 Gulp-Plugins auf npm aufgeführt . So können Sie sehen, dass es klare (hoffentlich ...;)) Definitionen dafür gibt, was für Ihre Anwendung am besten funktioniert.

Abgesehen davon sehen Sie möglicherweise ein komplexes Projekt, bei dem sowohl Task-Runner als auch Paket-Bundler gleichzeitig oder zusammen verwendet werden. In meinem Büro verwenden wir beispielsweise gulp, um unser Projekt zu starten, und das Webpack wird tatsächlich von einer bestimmten gulp-Aufgabe ausgeführt, die die Quellpakete erstellt, die wir zum Ausführen unserer App im Browser benötigen. Und weil unsere App isomorph ist , bündeln wir auch einen Teil des Servercodes .

Meiner bescheidenen Meinung nach möchten Sie sich vielleicht mit all diesen Technologien vertraut machen, da Sie sie wahrscheinlich im Laufe Ihrer Karriere sehen (nutzen) werden.

Ich habe gerade meinen eigenen Task Runner / Bundler erstellt.

Es ist einfacher zu bedienen als schlucken und wahrscheinlich Webpack (obwohl ich Webpack noch nie benutzt habe).

Es ist sehr einfach und hat babel, browserify, uglify, minify und Lenker aus der Box.

Die Syntax sieht folgendermaßen aus:

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

Und das Dokument ist hier: https://github.com/lingtalfi/Autumn

Hoffentlich hilft es.