HTML5 Boilerplate: Das build-Skript

Das HTML5 Boilerplate ist ein sensationelles Projekt. Es liefert Webworkern einen hervorragenden Ausgangspunkt für HMTL5-Seiten – grundlegendes Markup, Basis-Stylesheet inklusive Reset, hilfreiche Javascripts, Beispieldateien zur Server-Konfiguration. Alles da, gepaart mit den „best practices“ in diesen Bereichen.

Wer sich das Boilerplate zum ersten Mal ansieht, wird sich vermutlich auf das Markup oder das CSS stürzen, eventuell auch auf die .htaccess – was vollkommen legitim ist. Die entsprechenden Dateien sind voll interessanter, gut dokumentierter Hinweise zu modernen Frontend-Techniken. Aber der meines Erachtens größte Vorteil, der Teil des Boilerplates, der mich persönlich endgültig überzeugt hat, es künftig zu benutzen (statt eines eigenen Kickstart-Templates), ist das build-Skript.

build-was?

Im Verzeichnis build einer lokalen Kopie des Boilerplates liegen neben ein paar nützlichen Java-Programmen (z.B. der YUI Compressor) ein Shell-Skript und eine XML-Datei (welche man unter Linux, OSX oder Windows benutzen kann, wobei unter Windows deutlich mehr Arbeit zur Einrichtung nötig ist). Diese machen das Arbeiten mit dem Boilerplate unglaublich bequem.

createproject.sh sorgt dafür, dass man nicht für jedes Projekt eine frische Kopie des Boilerplates herunterladen muss – es erzeugt eine Arbeitskopie der benötigten Dateien in einem separaten Verzeichnis. Aus diesen erzeugt dann das Apache-Tool ant mit Hilfe der build.xml die „finalen“ Versionen der Dateien, welche man dann auf den Server überträgt.

If you build it, they will come

Welche das genau sein sollen, lässt sich über die Datei project.properties (im Verzeichnis build/config/ der Arbeitskopie) fein steuern, genauer gesagt muss diese Datei für jedes Projekt individuell angepasst werden, wenn man zusätzliche Dateien und/oder Verzeichnisse verwendet, damit der build-Prozess korrekt funktioniert. In eher seltenen Fällen können auch Änderungen an der build.xml notwendig sein.

ant build macht erheblich mehr als „nur“ die Dateien zusammenzustellen, welche schließlich auf den Server wandern: Javascript und CSS wird kombiniert, minifiziert und versioniert, Grafikdateien optimiert, HTML von Kommentaren und unnötigen Bausteinen befreit und noch Einiges mehr. (Die im Boilerplate enthaltenen Teile, welche man nicht verwenden möchte – wie etwa Google Analytics – muss man aber dennoch nach wie vor manuell entfernen.)

Das spart mit wenigen Shell-Kommandos derart viel Kleinarbeit, die man sonst von Hand machen würde, dass es wirklich keinen Grund gibt, noch ein eigenes Grundgerüst für eine Webseite in HTML5 zu pflegen – alles, was man eventuell hinzufügen möchte (Markup, Stylesheets, Javascript, Webfonts usw.) kann ja problemlos und mit vergleichsweise geringem Aufwand in den build-Vorgang integriert werden.