Task Runner (Gulp, Grunt, etc) und Bundler (Webpack, Browserify). Warum zusammen verwenden?

Question

Ich bin ein bisschen neu, um die Aufgabe Läufer und Bündler Welt und während die Dinge gehen durch wie

Grunt, Gulp, Webpack, Browserify

, fühlte ich mich nicht, dass es viel Unterschied zwischen Sie. Mit anderen Worten, ich glaube, dass Webpack alles tun kann, was ein Aufgabenläufer tut. Aber ich habe immer noch ein großes Beispiel, wo Schluck und Webpack zusammen verwendet werden. Ich konnte den Grund nicht herausfinden.

Als Neuling könnte ich die Dinge in die falsche Richtung gehen. Es wäre großartig, wenn du aufzeigen könntest, was mir fehlt. Nützliche Links sind willkommen.

Vielen Dank im Voraus.

Answer 1

Grunt und Gulp sind eigentlich Task-Runner, und sie haben Unterschiede wie konfigurierte Aufgaben versus Stream-basierte Transformationen. Jeder hat seine eigenen Stärken und Schwächen, aber am Ende des Tages helfen sie ziemlich viel dabei, Aufgaben zu erstellen, die ausgeführt werden können, um ein größeres Build-Problem zu lösen. Die meiste Zeit haben sie nichts mit der tatsächlichen Laufzeit der App zu tun, sondern sie transformieren oder sie stellen Dateien, Konfigurationen und andere Dinge ein, so dass die Laufzeit wie erwartet funktioniert. Manchmal erstellen sie sogar Server oder andere Prozesse, die Sie zum Ausführen Ihrer App benötigen.

Webpack und Browserify sind Paketbündler. Im Grunde sind sie so ausgelegt, dass sie alle Abhängigkeiten eines Pakets durchlaufen und ihre Quelle in 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 mit Node.js und dem v8 Compiler ausgeführt werden können. Auch hier gibt es Vor- und Nachteile und verschiedene Gründe, warum manche Entwickler das eine oder das andere bevorzugen (oder manchmal beide!). Gewöhnlich enthalten die Ausgabebündel dieser Lösungen eine Art von Bootstrapping-Mechanismen, die Ihnen helfen, die richtige Datei oder das richtige Modul in einem potenziell riesigen Paket zu finden.

Die verschwommene Linie zwischen Läufern und Bündlern könnte sein, dass Bündler während ihrer Laufzeit auch komplexe Transformationen oder trans-pilations durchführen können, so dass sie verschiedene Aufgaben erledigen können. In der Tat gibt es zwischen browserify und webpack wahrscheinlich rund hundert transformers, die Sie verwenden können, um Ihren Quellcode zu ändern. Zum Vergleich, es gibt mindestens 2000 Gulp-Plugins aufgelistet auf npm gerade jetzt. Sie können also sehen, dass es klare (hoffentlich ...;)) Definitionen gibt, was am besten für Ihre Anwendung funktioniert.

Das heißt, Sie sehen möglicherweise ein komplexes Projekt, das sowohl Task-Runner als auch Paket-Bundler gleichzeitig oder im Tandem verwendet. In meinem Büro beispielsweise verwenden wir gulp, um unser Projekt zu starten, und webpack wird tatsächlich von einer bestimmten Schluckaufgabe ausgeführt, die die Quellpakete erstellt, die wir benötigen, um unsere App im Browser auszuführen. Und weil unsere App isomorphic ist, haben wir auch bundle some of the server Code.

Meiner bescheidenen Meinung nach sollten Sie sich mit all diesen Technologien vertraut machen, denn die Chancen werden Sie alle im Laufe Ihrer Karriere sehen (nutzen).