Der erste Blog-Beitrag im neuen Jahr.
Eigentlich schon viel zu spät, dennoch allen ein erfolgreiches neues Jahr 2016.
Seit einiger Zeit baue und verteile ich meine Projekte mit automatisierten Aufgaben-Werkzeugen wie Ant.
Ant ist ein Java Build Tool - wie die Bezeichnung es schon sagt - in Java geschrieben
und jeder der mich kennt, kennt auch meine Abneigung gegen Java.
Bisher hat es mir aber wirklich gute Dienste erwiesen und deshalb möchte ich nicht allzu lange darüber meckern.
Das alte Ant-Script ist eine Adaption aus einem Talk von André Laugks beim Multimediatreff 29 über SASS/SCSS/Compass.
Schöne neue Welt der Helfer-Werkzeuge
Die schöne neue Zeit liefert aber auch andere Umgebungen, wie zum Beispiel nodejs.
Für die nodejs Laufzeit-Umgebung existieren viele schöne kleine und perfomante Tools wie grunt, gulp, bower, yeoman etc.
Eines dieser hilfreichen Tools ist gulp - ein streaming build system.
Das Grundprinzip von gulp arbeitet mit einem Pipe-Prinzip, bekannt von der Unix-Shell.
Dadurch wird viel I/O-Last gespart und ist wirklich sehr performant.
Ein einfacher Vergleich zwischen dem Ant-Script und dem neuen Gulp-Script zeigt,
dass Ant ca. 8sek. benötigt und Gulp bereits nach 3sek. das Script fertig ist.
Gulp spart Zeit und Nerven
Das Gulp-Script zieht alle nötigen Assets aus meinem Quellcode-Verzeichnis und fasst sie bereits zusammen,
so dass später auf dem Vorschau oder Produktionssystem nur noch das passende Verzeichnis hochgeladen werden muss.
Der Vorteil ist - ich kann zu jeder Zeit mit Hilfe des Werkzeugs Kopien mit neuen Aktualisierungen für den Kunden erzeugen.
Dadurch kann schnell und einfach eine Menge Zeit gespart und viele Kunden zufrieden gestellt werden.
Meine Projektstruktur
Meine Projekte, wie zum Beispiel der Relaunch 2014 des Tanzsportverein TSG Balance Wesel e.V., haben folgende Ordnerstruktur
├── assets
├── sass
│ └── add-ons
│ └── core
│ └── all.scss
│ └── ...
└── index.html
└── gulpfile.js
└── template-1.html
└── template-2.html
└── ...
Als interaktives Beispiel habe ich den Frontend-Quellcode dieses Blog bei GitHub online gestellt.
Build-Vorgang und Verteilung
Das Verzeichniss sass ist mein vollständiger Quellcode-Ordner in dem alle assets aufbewahrt sind.
Allerdings kann ohne ein Pre-Compiling die Vorschau-Version des Projekts nicht betrachtet werden.
Mit Hilfe der Aufgabe gulp compile:preview lassen sich aber ganz einfach alle assets nach assets/js oder assets/css erstellen
und schon kann ich in meiner Entwicklungsumgebung die kompilierten Vorschau der Seite sehen.
Die Aufgabe gulp deploy:preview oder gulp deploy:production schließlich erzeugt vollständige Kopien des Projektes,
die an den Kunden weitergegeben werden können oder zur Veranschaulichung in eine Testumgebung gelegt werden.
Wer das Script gerne verwenden möchte, bloß keinen Zwang, ich habe es unter die MIT-Lizenz gestellt.
Die Pfade sind im Kopfbereich unter dem entsprechenden Kommentar vollständig konfigurierbar.
Wie baut Ihr eure Projekte zusammen?
Anregungen gerne in den Kommentaren.