Sogenannte Javascript Task Runner, wie z.B. Gulp oder Grunt sind so etwas wie die heimlichen Heinzelmännchen vieler Webentwickler. Wenn es darum geht wiederkehrenden Aufgaben ihren Frustfaktor zu nehmen, sind sie das probate Mittel auch bei größeren Web-Projekten „kalt lächelnd“ an die Sache heranzugehen.
Mit einem Task Runner lassen sich wiederkehrende Fleißarbeiten bequem automatisieren. Auf welchen Kandidaten die Wahl fällt, ist fast nebensächlich. Beide leisten gute Dienste und nach einer Weile der Einarbeitung möchte man sie nicht mehr missen.
Kernstück der Heinzelmännchen – JavaScript
JavaScript ist nicht jedermanns Sache, aber tiefgreifende Kenntnisse sind nicht notwendig. Die Konfiguration der Task Runner erinnert zwar irgendwie an JavaScript, ist es aber nicht. Es ist eigentlich eher ein Ablaufplan in dem angegeben wird was zu erledigen ist. Zum Beispiel das Sammeln aller Dateien aus einem Ordner die minifiziert und als eine JavaScript Datei gespeichert werden sollen. Beide Task Runner kommen mit einer überschaubaren Zeilenzahl Code aus und die Community dahinter lässt einen nicht im Regen stehen.
Ohne weitere Vorbereitungen sind Grunt oder Gulp auf einem Windows-System nicht lauffähig. Bei Linux oder Apfel sieht es anders aus. Hier gibt es keine Probleme. Windows kann JavaScript nicht ohne weiteres lokal ausführen und braucht etwas Unterstützung in Form von NodeJs. Ist Node installiert macht aber Windows keine Probleme mehr.
Das eigentliche Herzstück der Task Runner sind die diversen Erweiterungen. In den meisten Fällen lassen sie sich out of the Box nutzen und sind schnell eingerichtet. Hat man sich mit der Arbeitsweise eines JavaScript Task Runner auseinander gesetzt, wird man schlussendlich feststellen, dass anfängliche Bedenken eher grundlos waren.
Der Platzhirsch – Grunt ist älter und die Community ist größer
Die Community, die hinter Grunt steckt ist riesig und für so ziemlich jedes Webentwickler Wehwechen gibt es irgendein Plugin. Das Problem an dieser Fülle ist aber, dass man viel Zeit damit verbringen kann, dass vermeintlich richte zu finden. Außerdem erfordert Grunt etwas mehr Einarbeitungszeit und ist in der Verarbeitung der Aufgaben etwas (ca. zwei bis drei Wimpernschläge) langsamer. Hat man sich aber erst mal mit dem Tool vertraut gemacht, ist Grunt ein prima Heinzelmännchen.
Der Neuling – Gulp ist anders aufgebaut aber gut aufgestellt
Gulp ist quasi der Frischling, zumindest im Vergleich. Auch hier ist die Community ziemlich groß. Die Dokumentationen lassen ebenfalls keine wünsche offen und auch das Angebot der Erweiterungen ist riesig und stetig am wachsen. Der hervorstechende Unterschied zu Grunt ist: Gulp ist Stream und Code-over-Configuration-Konvention basiert.
Durch diese Arbeitsweise erhält der User eine bessere Übersicht und Kontrolle über seine Dateistruktur und kann auf temporäre Dateien und Ordner verzichten. Des weiteren sind die Plugins bei Gulp auf eine Funktion beschränkt. Damit werden Konflikte mit anderen Plugins oder Core-Features vermieden. Anders als bei Grunt, ist die Gulpfile als Code und nicht als Config dargestellt. Lesen, verstehen und bearbeiten fällt dadurch erheblich leichter, besonders dann, wenn man bereits über einen gewissen Background verfügt oder JavaScript schon mal gesehen hat.
Stellt man beide Kandidaten einander gegenüber, lassen sich feine aber nicht unerheblich Unterschiede ausmachen.
- Gulp nutzt node.js, Grunt basiert auf node.js.
- Grunt Plugins können mehrfache Aufgaben ausführen, Gulp Plugins jedoch nur eine Funktion
- Gulp benötigt für einige Funktionen keine zusätzlichen Plugins. File watching, dass beobachten auf Änderungen in/an einer Datei und das darauf folgende Auslösen einer abhängigen Aufgabe ist bereits vorhanden, Grunt benötigt hierfür ein weiteres Plugin
- Gulp ist Stream basiert. So lassen sich Arbeitsschritte in einer Aufgabe bündeln und abarbeiten. Soll z.B. eine SCSS Datei in eine minimierte CSS Datei umwandeln werden, sind dafür nur die einzelnen Abschnitte für die Aufgabe zu notieren und werden als ein Vorgang verarbeitet. Das könnte dann aussehen, wie folgt: 1. Alle SCSS in einem Ordner zu einer Roh-CSS zusammenfügen. 2. Auf Fehler prüfe. 3. Mit den nötigen Browser- Prefixes versehen. 4. Als CSS ausgeben und separat abspeichern. 5. Eine Kopie der CSS Datei minimieren und in dem Finale Verzeichnis speichern. Mit JavaScript, Bildern und anderen geht es ähnlich.
Mit einem Task Runner lassen sich noch eine Menge mehr „verrückter“ Sachen anstellen. Ich nutze sie sehr gern und bei fast allen Projekten, bei denen sie Sinn machen. Besonders bei der Entwicklung mobiler Webseiten mit SCSS sind sie für mich nicht mehr weg zu denken. Sicher, die einzelnen Media Queries müssen immer noch per Hand geschrieben werden, aber die Browser-Prefixes und das „zusammen kochen“ der verschachtelten Klassen etc., erledigen sie für mich. Sie können helfen Zeit zu sparen, aber nicht nur bei den Fleißarbeiten. Das freut nicht nur den Nutzer solcher Tools, dass freut ebenso den Kunden.
Für die, die einen Vergleich etwas ausführlicher und als Bewegtbild haben möchten, gibt es ein Interview mit Stefan Baumgartner. Viel Spaß beim anschauen.