Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Bauen wie die Ameisen

Bauen wie die Ameisen

Das HTML5 Boilerplate liefert nicht nur eine sinnvolle Vorlage, um zeitgemäße Webseiten zu entwickeln, es gibt Webentwicklern auch ein Werkzeug, diese optimiert auszuliefern. Matthias Mees erklärt, was das build-Skript leistet.

Das HTML5 Boilerplate ist eine solide Vorlage für zeitgemäße Webseiten. Webentwickler finden nicht nur Vorgaben für HTML und CSS vor, sondern auch bereits integrierte Javascript-Helfer wie jQuery und Modernizr sowie viele intelligente Voreinstellungen in der .htaccess. Passende Muster für favicon und auf Smartphones verwendete Icons, eine robots.txt sowie eine QUnit-Suite, um Javascript-Code zu testen, machen das Boilerplate zu einer umfangreichen Universalvorlage für neue Webprojekte. Es handelt sich dabei ausdrücklich nicht um eine klassisches Framework, zumal das HTML5 Boilerplate keinerlei Layout-Vorlagen mitbringt. Viel mehr bündelt und dokumentiert es bewährte und sinnvolle Vorgaben zentral und erspart Webworkern, diese von Hand zusammenstellen zu müssen.

Gleichzeitig liefert das Boilerplate aber auch ein Skript, um Webseiten vor der Auslieferung auf den Server automatisiert zu optimieren und zu prüfen.

Baustellen-Besichtigung

Das build-Skript samt aller benötigten Werkzeuge liegt im Verzeichnis build einer Kopie des Boilerplates. Die Datei build.xml ist dabei das eigentliche Skript, das mittels des Java-basierten Tools ant ausgeführt wird. Dieses funktioniert nur innerhalb des build-Verzeichnisses.

Der Inhalt der Wurzelverzeichnisses des HTML5 Boilerplates
Der Inhalt der Wurzelverzeichnisses des HTML5 Boilerplates

Die Batch-Datei runbuildscript.bat im build-Verzeichnis dient zur Ausführung des Skriptes unter Windows – sie stellt lediglich sicher, dass eine notwendige Pfadangabe gesetzt wird und ruft dann das eigentliche build-Skript auf. Webworker, die das Boilerplate als Fork aus dem GitHub-Repository gezogen haben, können mit dem bash-Skript createproject.sh eine lokale Arbeitskopie in einem separaten Verzeichnis erzeugen, die nur die tatsächlich benötigten Dateien, nicht aber die von git erzeugten enthält. Im »normalen« Download-Archiv sind diese bereits entfernt.

Im Verzeichnis config liegen die Konfigurationsdateien zur Einrichtung des Bauvorhabens, einerseits für Standardeinstellungen, andererseits projektspezifisch. Das Verzeichnis tools beinhaltet kleine Helferprogramme wie etwa den YUI Compressor oder Tools zur Bildoptimierung und Codeprüfung.

Vor dem ersten Bau

Auf aktuellen OSX- oder Linux-Systemen sollte das build-Skript ohne weitere Schritte funktionieren, bestenfalls müsst ihr über die jeweilige Paketverwaltung das Paket ant-contrib nachinstallieren. Windows-Systeme benötigen Win Ant, wofür zunächst das Java Development Kit installiert sein sollte. Wichtig: Das Java Runtime Environment reicht nicht aus. Alle weiteren zum Einsatz des build-Skriptes notwendigen Werkzeuge sind im Download-Archiv des HTML5 Boilerplates enthalten.

Was leistet das build-Skript?

In erster Linie optimiert es die zum Projekt gehörenden HTML-, CSS- und Javascript-Dateien, insbesondere in Sachen Performance. Es kombiniert und minifiziert eingebundenes CSS und JS, fügt also jeweils mehrere Dateien zu einer zusammen und entfernt aus dieser im Produktivbetrieb unnötige Leerzeichen und Kommentare. Kommentare entfernt es auch aus HTML-Dateien, optional beseitigt es auch in diesen unnötige Leerzeichen. Das verschlankt zum einen alle ausgelieferten Dateien, zum anderen reduziert es die Zahl der angefragten Dateien, also die Zahl der HTTP-Requests.

Um den Cache-Mechanismus von Browsern auszutricksen, ändert das build-Skript zudem bei jedem Durchlauf die Dateinamen der kombinierten CSS- und JS-Dateien nach dem Zufallsprinzip und aktualisiert die Referenzen zu diesen in den HTML-Dateien entsprechend. Da die .htaccess-Datei des Boilerplates für diese relativ lange Cache-Zeiten vorgibt, würden diese bei gleichbleibendem Dateinamen ansonsten womöglich erst Monate nach Auslieferung neu geladen.

Der Befehl ant css-split teilt die style.css des Boilerplates in fünf Dateien auf, die über @import-Anweisungen von der style.css eingebunden werden. Konkret trennt es Normalisierung, primäre Styles, @media-Queries, Helferklassen und Print-Styles in übersichtliche Module. Selbstverständlich setzt das build-Skript diese wieder zu einer kombinierten Datei zusammen. Ebenso der sauberen Trennung dient die Aufteilung des JS-Codes in plugins.js (z.B. für externe jQuery-Plugins) und script.js (für eigenen Code), auch diese fügt das build-Skript zu einer Datei zusammen.

Über die Tools jpegtran und optipng verringert das build-Skript die Dateigröße der zum Projekt gehörenden JPG- und PNG-Grafiken, u.a. indem es überflüssige Metadaten aus den Dateien entfernt. Ähnliches erledigt natürlich bereits die »Save for web«-Funktion gängiger Grafikprogramme – wundert euch hier also nicht vorschnell über mangelnde Effizienz, eventuell sind die Dateien bereits optimiert. Dazu entfernt das build-Skript Code, der nur in der Entwicklungsphase benötigt wird, sowie Referenzen auf in der Produktivumgebung überflüssige Dateien.

Zudem kann das build-Skript optional ein sogenanntes cache manifest generieren. Diese Textdatei ermöglicht es, Web-Applikationen auch offline ausführen zu können. Sie enthält eine Liste der zur Ausführung notwendigen Dateien und weist den Browser an, diese für Offline-Nutzung zu speichern.

Weitere Helferchen im tools-Verzeichnis dienen der Qualitätssicherung des CSS- und JS-Codes. JS Hint, JS Lint und CSS Lint prüfen den Code auf Fehler und mögliche Performance-Bremsen. Diese laufen auf der ebenfalls auf Java basierenden Javascript-Engine rhino. JS Hint und JS Lint könnt ihr über die Konfigurationsdateien des build-Skriptes genauer konfigurieren.

Ausführung

Ausgabe der Ausführung des build-Skriptes in einem Terminal
Ausgabe der Ausführung des build-Skriptes in einem Terminal

Neben dem bereits erwähnten Kommando zum Aufteilen der CSS-Datei bietet das build-Skript verschiedene »Ziele«, also unterschiedliche Aufgabengruppen für verschiedene Stufen der Entwicklung. Der Zweck der unterschiedlichen Stufen (Entwicklung, Testen, Produktion) ebenso wie der verschiedenen Ziele ist es, Zeit im Ablauf der build-Vorgangs zu sparen, indem zeitaufwändige Schritte wie etwa die Bildoptimierung übersprungen werden. In den meisten Fällen genügt es, wenn ihr ein ant build ausführt, soll zusätzlich der HTML-Code minifiziert werden, ist ant minify die richtige Wahl. Über ant text überspringt das build-Skript die relativ zeitraubende Optimierung von JPG- und PNG-Grafiken.

Zur Ausführung von JS Hint, JS Lint und CSS Lint müsst ihr lediglich den betreffenden Befehl an das build-Kommando anhängen, also z.B. ant build jshint. Alle drei Tools bremsen den build-Durchlauf merklich aus, Entwickler sollten sie also nicht unbedingt bei jedem build-Lauf mit ausführen lassen – JS Lint und JS Hint aber unbedingt dann, wenn sie das Javascript eines Projekts überarbeitet haben, denn dann zeigen beide zuverlässig Fehler auf.

Etwas Handarbeit

Einige Dinge kann das build-Skript (noch) nicht automatisieren. So müsst ihr jede zum Projekt gehörende HTML-Datei von Hand in die Konfigurationsdatei project.properties eintragen. Ebenfalls »bekannt machen« sollten Webworker Dateien und Verzeichnisse, die aus der Produktivumgebung ausgeschlossen werden sollen, etwa im Projektverzeichnis liegende Originale von Grafikdateien oder Stylesheets für einen CSS-Präprozessor wie SASS oder LESS.

Das build-Skript bietet eine Vielzahl weiterer Möglichkeiten, um die Arbeit mit dem HTML5 Boilerplate zu automatisieren und zu vereinfachen. Es ist im Wiki des Projektes auf GitHub ausführlich dokumentiert.

Kommentare

Oliver
am 23.12.2011 - 20:49

Über die Tools jpegtran und optipng verringert das build-Skript die Dateigröße der zum Projekt gehörenden JPG- und PNG-Grafiken, u.a. indem es überflüssige Metadaten aus den Dateien entfernt. Ähnliches erledigt natürlich bereits die »Save for web«-Funktion gängiger Grafikprogramme – wundert euch hier also nicht vorschnell über mangelnde Effizienz,

Jpegtran optimiert auch den Huffman Coding Layer und entfernt interlaced Daten. Photoshop ist weit davon entfernt, mit diesen Optimierungen mithalten zu können. Auch nicht mit den Save for web Funktion. Ursprünglich ist jpegtran aber mal zur verlustfreien Bearbeitung entwickelt worden. Dies bringt je nach Ausgangsmaterial etwa 5 bis 20 % je nach Dateigröße.

Optipng ist noch eine andere Baustelle. Optipng entfernt die Fehlerkorrektur, Farbprofile, interlaced Daten und optimiert die zeilenweise Speicherung, sowie die Datenkompression. Da kann Photoshop noch weniger mithalten. Mit richtigen Optimierungen kann man bei pngs bis zu 90 % einsparen. Optipng alleine bringt je nach Ausgangsmaterial 5 bis 60 %.

Permanenter Link
Matthias Mees

Matthias Mees (Autor)
am 23.12.2011 - 21:00

Tolle Zusatzinformationen, danke. (Ich arbeite selbst nicht mit Photoshop.)

Permanenter Link

Die Kommentare sind geschlossen.