Web Designs: Automatisierung mit gulp.js

Als Web Designer wird es schnell mühselig, wenn man komplizierte Entwicklungsarbeiten mehrmals ausführen muss. Zum Glück gibt es aber zahlreiche Hilfsmittel, mit denen man wiederkehrende Arbeiten als konfigurierbare Workflows automatisieren kann. gulp.js ist eines dieser Hilfsmittel, basiert auf Node.js und verwende ich bei Neoflow seit mehreren Jahren in allen Webprojekten.

Das Webdesign einer Webseite besteht prinzipiell aus drei Typen von Ressourcen: Bilder, JavaScript und CSS. Bilder sind statisch, werden meistens am Anfang vom Grafik Designer zur Verfügung gestellt und müssen nachträglich nicht mehr gross bearbeitet werden. Bei JavaScript und CSS ist es aber anders. Diese beiden Ressourcen bestehen meistens während der Entwicklung aus mehreren Dateien und browserseitig nicht unterstützten Programmiersprachen.

In meinem Fall verwende ich TypeScript, oder zumindest neuere Version von ECMAScript, für die Entwicklung von JavaScript. Für CSS nutze ich SASS als CSS-Präprozesser für die Entwicklung. Aus diesem Grund ist es für mich unumgänglich, dass ich meinen Code zuerst zu JavaScript- und CSS-Ressourcen generieren muss, damit ich es auch Browser-kompatibel in meine Webdesigns einbinden kann. Damit ich die Downloadzeit der Ressourcen und somit auch die Benutzererfahrung spürbar verbessern kann, bündle ich zusätzlich die Ressourcen je Typ in eine Datei und verkleinere den Inhalt in die kleinste mögliche Textmenge. So bleiben am Schluss nur noch zwei Dateien übrig, eine style.min.css für das CSS und eine script.min.js für das JavaScript.

Jedes Mal, wenn ich nun in einem Webprojekt etwas am Code ändere und im Browser testen möchte, muss ich zuerst die CSS- und JavaScript-Ressourcen neu generieren, bündeln und verkleinern. Doch hier kommt der Vorteil von gulp.js ins Spiel. Vorausgesetzt natürlich, es ist alles richtig konfiguriert, nimmt mir das Tool die wiederkehrende Arbeit ab und es reicht, je nach Entwicklungsumgebung, ein Button zu drücken oder eine Kommandozeile auszuführen, um die CSS- und JavaScript-Ressourcen neu zu erstellen.

Anstelle der manuellen Ausführung, bietet gulp.js aber auch die Möglichkeit, den Code zu überwachen und bei Veränderungen, automatisch die entsprechenden Ressourcen generieren zu lassen. Perfekt geeignet, um während der laufenden Entwicklung die Arbeit im Browser testen zu können.

Wer an gulp.js interessiert ist, dem kann ich das Studium der offiziellen Dokumentation sehr empfehlen und sich mittels Learning by doing an die Materie heranzutasten. Auf Anfrage stelle ich auch gerne die von mir verwendete Konfigurationsdatei von gulp.js und das dazugehörige package.json von Node.js zur Verfügung.

Ich hoffe ich konnte einen kleinen Blick hinter die Kulissen von Neoflow, bei der Entwicklung von Webdesigns ermöglichen und bedanke mich für das Lesen, des doch sehr Webtech-lastigen Inhalts.

Alles Gute und Gruss,
Jonathan