Die WEAVE, eine Schwesterzeitschrift der PAGE, ist das Fachmagazin für Gestalter, Konzeptioner, Auftraggeber und Developer interaktiver Medien. Sie berichtet im Zwei-Monats-Takt über Trends, Projekte und Technologien.

Neben ausführlichen Case Studies, Interviews und Portraits bietet die WEAVE auch einen Workshop-Teil, der in Step-by-Step-Anleitungen Tools und Workflows vermittelt.

In einer solchen Step-by-Step-Anleitungen zeige ich, wie man einer Webanwendung durch ein flinkes Build-Script Beine machen kann.

In acht nachvollziehbaren Schritten (Software installieren und Umgebung einrichten, Projekt mit Yeoman bootstrappen, Dateien zusammenfassen, Code analysieren / Coding Conventions sicherstellen mit JSHint, Quelltext minifizieren, CSS optimieren mit Compass, HTML automatisch anpassen mit UseMin, Bilder verlustfrei re-komprimieren mit OptiPNG und JPEGTran, …) wird in diesem Tutorial ein Frontend-Projekt optimiert. Dabei kommen die Tools Grunt, Yeoman und Bower, unterstützt durch SASS, Compass, OptiPNG und JPEGTran zum Einsatz.

Ein Beispielprojekt für diesen Workflow findet man auf GitHub.