Der komplette Sourcecode liegt in /src und wird während des Build-Prozesses nach /build kompiliert. Darin liegen die index.html sowie die sub.html (mit alternativen Elementen). Der build-Ordner bildet also das auslieferbare HTML/CSS/JS-Paket.

Wichtig: Das Paket muss direkt im Stammverzeichnis / liegen, da sonst die Pfade zu CSS, JS und den Bildern nicht stimmen.

Es werden im Development eine Reihe von Präprozessoren ausgeführt. Das erlaubt uns, folgende Abstraktionen einzusetzen:

Pug => HTML
SASS => CSS
ES6 => JavaScript
SVG => Optimized SVG-Sprite

• npm
• node.js
• git

Zunächst das Repository lokal clonen:

$ git clone https://github.com/ugrupp/citygate.git

Dann im Projektverzeichnis die benötigten Pakete installieren:

$ cd citygate
$ npm install

Der Workflow basiert auf gulp. Es gibt zwei Haupt-Tasks, die jeweils vom Projektverzeichnis aus ausgeführt werden können:

$ gulp

Ausgeführte Tasks:

• HTML (Pug)
• JS (Linting, Browserify, Babel, Minification, Sourcemaps)
• CSS (Linting, SASS, Autoprefixer, Minification)
• Assets (SVG Optimization & Sprite, kopieren sonstiger Bilder)
• Watch
• Browsersync

$ gulp production

Ausgeführte Tasks:

• HTML (s.o.)
• CSS (s.o.)
• JS (s.o.)
• Assets (s.o.)

Wir nutzen hier einen SVG Workflow, der alle SVGs in einen externen SVG-Sprite zusammenführt. Dabei werden die SVGs zudem noch optimiert. Es ist zu beachten, dass die SVGs keine wichtigen Anweisungen in <defs>-Tags beinhalten dürfen, da diese bei der eingesetzten SVG-Sprite-Methode nicht berücksichtigt werden.

Browsersync läuft als Proxy vor der lokalen Dev-Domain, welche standardmäßig citygate.test lautet. Dies kann durch Setzen der Umgebungsvariable BROWSERSYNC_PROXY_DOMAIN in der .env-Datei geändert werden.

Beispiel .env-Datei:

BROWSERSYNC_PROXY_DOMAIN="citygate.local"

Urs Grupp, https://www.21sieben.de/