Webentwicklers Heinzelmännchen – JavaScript Task Runner

JavaScript Task Runner

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 Fleißarbeiten automatisieren, die einem bislang die Schweißperlen auf die Stirn trieben oder die man gern mal übersehen hat. 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 wirklich tiefgreifende Kenntnisse sind auch nicht notwendig. Beide Task Runner kommen mit einer überschaubaren Zeilenzahl Script aus und die Community dahinter lässt einen nicht im Regen stehen. Das eigentliche Herzstück der Task Runner sind Plugins. In den meisten Fällen lassen sie sich – vom Start weg – nutzen und es gibt für jedes „Problem“ irgendein passendes Plugin. Hat man sich etwas – oder etwas mehr – mit der Arbeitsweise 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 Neue in der Nachbraschaft – 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 hervorstechendste Unterschied zu Grunt ist: Gulp ist Stream und Code-over-Configuration-Konvetion basiert.

Durch diese Arbeitweise 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.

Stellt man beide Kandidaten einander gegenüber, lassen sich feine aber nicht unerheblich Unterschiede ausmachen.

  • Gulp nutz node.js., Grunt ist ein auf node.js basierender Task Runner
  • Grunt Plugins können mehrfache Tasks 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 eines abhängigen Task ist bereits vorhanden, Grunt benötigt hierfür ein weiteres Plugin
  • Gulp ist Stream basiert. So lassen sich Arbeitsschritte in einem Task 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 den Task 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 seperat abspeichern. 5. Eine Kopie der CSS Datei minimieren und in dem Finale Verzeichnis speichern.

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.

Ähnliche Artikel