Bei der Frontend und Web- Entwicklung gibt es Arbeitsschritte die nötig sind und sich ständig wiederholen. Um bei der Entwicklung Zeit zu sparen lassen sich viele davon mit einem Task-Runner abarbeiten.
Gulp oder Grunt sind die bekanntesten Javascript Task-Runner und sicherlich vielen ein Begriff. Sie übernehmen lästige Routinen, wie z.B das prefixen von CSS und vieles mehr. Wer sich eingehend mit ihnen beschäftigt hat und sie in seine Arbeitsroutinen eingebunden hat, will sie auch nicht mehr missen.
Wenn es mal schnell gehen soll, und das soll es bei der Frontend Entwicklung immer, geht es eigentlich nicht mehr ohne. Mal eben ein paar JavaScripte linten, ein bisschen SASS prefixen, den Quellcode auf links drehen und wieder zurück, das kann schon mal passieren.
Prozesse bei der Frontend Entwicklung automatisieren
Man muss immer mal wieder ran. Entwicklung ist ein Prozess und es findet sich immer etwas wo man nochmal ran muss. Irgendeine Kleinigkeit, die für einen Versatz des Menüs im Frontend bei einem Tablet sorgt, Beispielsweise. Sind die Prozesse weitestgehend automatisiert muss man sich zumindest um die Abhängigkeiten keine großen Gedanken machen und das spart Zeit.
Ist die Entwicklung soweit durch, fix alle JavaScripte bündeln und zusammen mit dem Stylesheet minimieren und ab auf den Server. Nebenbei die Version fürs Team als reine Roh-Daten und separate DEV-Version ins Repository übertragen. Warum nicht, geht ja.
Welches Tool set für welche Aufgaben?
Als Entwickler, egal ob Frontend oder Web Entwicklung, muss man die Augen und Ohren offen haben und neue Methoden oder die Änderung des Setup in Erwägung ziehen.
Viele kann man ignorieren. Aber einiges kann für zusätzliche Beschleunigung sorgen oder die Optionen erweitern und man sollte es mal testen. Wer weiß, vielleicht eröffnen sie einem die Tür für die Entwicklung von SPA mit einem coolen JavaScript Framework.
Einen Kandidaten der durchaus potential hat, ist Webpack. Er macht ein bisschen den Eindruck, als wäre er Gulp oder Grunt auf Steroiden. Auch wenn sich einiges ähnelt, Webpack ist anderes und unterscheidet sich deutlich. Seine Aufgaben sind ganz andere, aber zum Teil auch die, die üblicherweise von einem JavaScript Task-Runner bedient werden.
Webpack? WTF is Webpack?
Zu erst einmal… Webpack ist KEIN Task-Runner! Webpack ist ein JavaScript Bundler!
Wer mit seinem Task-Runner bei der Entwicklung glücklich ist, macht ganz sicher nichts falsch bei ihm zu bleiben. Trotzdem lohnt sich der Blick über den Tellerrand.
Webpack verfolgt einen anderen Ansatz als Task-Runner. Bei einem Task-Runner werden definierte Aktionen abgearbeitet und als Resultat ein Schwung Dateien ausgegeben. Webpack dagegen sammelt alle Module und Abhängigkeiten und generiert ein einziges statisches Asset (ein Bündel) daraus.
Die Konfiguration ist das A und O
Wie man dieses Bündel schnürt lässt sich haarfein deklarieren. Genauso wie bei jedem Task-Runner, der etwas von sich hält, gibt es auch für Webpack eine große Zahl Plugins oder Loader mit denen sich so gut wie jede Situation bewältigen und passend konfigurieren lässt. Was Webpack nach dem bündeln, dann präsentiert kann sich sehen lassen. Besonders in Punkto Performance macht Webpack Sinn.
Allerdings hat Webpack auch seine Schattenseiten. Die Konfiguration ist nichts für schwache Nerven oder ungeduldige Zeitgenossen… man muss wirklich Biss haben um das ganze sauber zum laufen zu bringen.
Also doch lieber bei Gulp bleiben und Webpack ignorieren?
Gulp ist mein Gewinner wenn es um die Einfachheit geht. Er läuft. Wenn es darum geht nur einen Teil des Frontend eines Projekts zu bearbeiten bleibt er meine erste Wahl. Mit Gulp oder Webpack lässt sich so gut wie jeder Workflow wunderbar handeln. Gulp ist aber viel einfach in der Usability. Webpack hingegen ist erheblich flexibler und die Entwicklung ist schneller. Unterm Strich entscheidet der eigene Stil und die persönlichen Vorlieben.
Die Kombination ist interesant
Beide Lager haben ganz klar ihre Berechtigung. Kommt man von Gulp hat man schnell das Gefühl Webpack ist etwas zu viel des Guten und wünscht sich etwas mehr von der „Gulpischen“ Einfachheit bei der Entwicklung. Ist man bei Webpack gelandet, faszinieren einen die Vielzahl der Möglichkeiten. Die Kombination aus beiden, Webpack und Gulp ist ein doppelter Gewinn und man liefert schnellere und bessere Webseiten ab!
Just my 2 cent’s