Workflow Frontend - Geopras/IdeaWatcher GitHub Wiki

Vorbereitung

Um die im Folgenden beschriebenen Befehle ausführen zu können muss vorher folgendes erledigt werden:

  1. Installation von nodejs (gibt es hier: https://nodejs.org/dist/v6.9.1/)
  2. In deinem Projektverzeichnis mit der Konsole in das Verzeichnis Frontend/node wechseln
    • cd ./Frontend/node
  3. Gulp und die benötigten sonstigen Module installieren (auswahl erfolgt automatisch anhand der package.json)
    • npm install

Workflow

Um das Arbeiten im Frontend besser organisieren zu können, wird oftmals ein Build System verwendet, um die einzelnen Teile der Webapplikation zusammenzusetzen.

HTML: in Abhängigkeit der Komplexität des Projektes werden die einzelnen Views auf unterschiedliche HTML Dateien aufgesplittet und in diesem Schritt zu einer einzigen HTML Datei zusammengefügt.

CSS: Ich würde Vorschlagen LESS(http://lesscss.org/) zu verwenden. LESS ist eine erweiterung zu CSS, in dem z.B. Variablen verwendet werden können und viele interessante Spielereien möglich sind. Ich weiß, in kommenden Standards ist das auch in CSS möglich, aber momentan Unterstützt die Windows Welt das weder im IE noch in EDGE, daher müssen wir da noch ausweichen(http://caniuse.com/#feat=css-variables)

JS Die JavaScript Dateien liegen für gewöhnlich in vielen einzelnen Datein vor. Analog zur CSS verarbeitung funktioniert auch die JS verarbeitung

  • JS Dateien zu einer einzelnen großen Datei zusammenfassen
  • Diese Datei wird minifiziert

Buildvorgang Mit Hilfe des nodeJS-Tools gulp und dessen Funktionen zur Concatenierung und Minimierung von Dateien kann der komplette Buildvorgang zur Erstellung jeweils einer Datei für HTML, CSS und JS abgebildet werden.

Folgender Kommandozeilenbefehl kann dazu genutzt werden (wenn GULP nur lokal installiert):

  • Pfad\Zum\Node\Ordner> node .\node_modules\gulp\bin\gulp.js buildAll (Windows)
  • Pfad/Zum/Node/Ordner> node ./node_modules/gulp/bin/gulp.js buildAll (Linux)

Wenn gulp global installiert ist:

  • Pfad/Zum/Node/Ordner> node gulp buildAll

Im Kern gibt es also eine HTML Datei, in dieser gibt es im Head den link zu der einen CSS Datei und als letzte Zeile im Body den Import der JS-Datei, um den Browser frühstmöglich rendern zu lassen.