PUG/JADE: Seinen Code mit Hilfe von PUG und Sass eine Entkopplung von Bootstrap erreichen

Was ist PUG / JADE?

PUG bzw. JADE, wie die Anwendung noch bis ende 2015 hieß, ist ein wirklich guter Template Generator für HTML: http://jade-lang.com/

Statt doch recht komplexen HTML Text zu schreiben und mit offenen und geschlossenen Tags arbeiten zu müssen, rückt man einfach ein. Im Vergleich sieht der Text in PUG gleich viel verständlicher als HTML:

Alleine dies überzeugt sicherlich noch nicht jeden, doch es hat noch zwei weitere wichtige Funktionen:

1. Include

Man kann mehrfach verwendete Teile auf mehreren HTML Seiten in eine Include Datei auslagern, so dass man Code-Doppelungen vermeiden kann.

In der Praxis ist das beispielsweise nützlich, um das einheitliche Laden von Basis-Skripten und Stylesheets für alle HTML an nur einer Stelle zu pflegen, und wenn Änderungen zustande kommen auch nur dort ändern zu müssen, statt in möglicherweise 100 Files und dann in der eine oder anderen zu vergessen.

In meinen Beispiel verwende ich das, wie folgt:

2. Mixin

Ein Mixin ist eine wiederverwendbare Funktion, die man in seinen Code aufrufen kann, wie man es von einer Programmiersprache erwartet. Hier sind zum Teil auch Javascript Anweisungen möglich.

In meinen Beispiel möchte ich, dass der Anwender vier Felder befüllt. Als ersten Parameter wird das Label angegeben, dann den Wert für das dahinter liegende Model und eine Validierungsformel:

Wir sind hierdurch nun entkoppelt, davon wie die innere HTML Struktur für so ein Feld aussehen soll. Vielleicht ist es heute Modern den Label über das Eingabefeld zu schreiben und morgen schreibt man es "Rechtbündig" links daneben. Das muss man dann hier nicht festlegen und bei Änderungen nicht mehr an Zig stellen ändern.

Man ist auch nicht mehr auf AngularJS festgelegt. Wie das Model intern weitergegeben wird, dass ist völlig offen. Man könnte anders, wie in meinen Beispiel dargestellt auch als Ziel ein Handlebars-Dokument erzeugen und eine Ember Lösung daraus bauen.

In meinen Beispiel sieht das Mixin wie folgt aus:

Hier werden nun die für Angluar bekannten "ng-"-Elemente verwendet.

Schaut man sich das Ergebnis im Browser an, dann wird deutlich, dass man sich eine Menge Komplexität gespart hat mit diesen Ansatz:

Wie hilft jetzt PUG bei der Entkopplung?

Für einen Stylesheet, wie Bootstrap, sind nicht nur CSS Klassen notwendig, sondern auch die Struktur, wie verschiedene HTML-Elemente zusammengesetzt werden ist wichtig, wenn man ein fertiges Stylesheet verwendet.

Will man den Stylesheet wechseln, oder auf Bootstrap4 upgraden, steht man schnell vor einer unlösbaren Aufgabe, da alles neu strukturiert werden muss.

Mit den Mixin von PUG kann man diese Entkopplung erreichen und eine zukunftssichere Oberfläche bauen.

Was ist SASS und warum braucht man dass?

SASS ist ähnlich wie PUG eine Abstraktion von CSS, die die Stylesheets beschreiben.

Wenn man nur PUG verwendet, dann steht man trotz allem vor der Aufgabe bei der Änderung eines Stylesheets auch alle Klassen-Formatierungen mit umzuschreiben.

Zudem macht es SASS auch einfacher, kleinere Anpassungen an dem vorgefertigten Stylesheets zu machen.

Schaut man sich den HTML Code meiner Page genauer an, dann sieht man auch dass bei allen Klassen ein Prefix "my-" verwendet wird. Ich habe mich für diesen entschieden, um den Customizing Code strikt von Bootstrap unterscheidbar zu machen, statt "my-" kann man natürlich das Firmenkürzel oder ähnliches verwenden.

In meiner "base.scss" Datei werden diese Klassen, dann auf die Bootstrap Klassen gemapped. Auch Zusammenfassungen mehrerer Klassen und Designs sind möglich:

Abhängigkeit von PUG und SASS

Natürlich stellt sich jetzt die Frage, aber dann ist man zukünftig von PUG und SASS abhängig.

Das stimmt nur bedingt, denn diese Meta-Sprachen werden in normales HTML oder CSS konvertiert und können auch weiter verwendet werden, falls diese Tools nicht mehr eingesetzt werden können.

Automatisieren mit GULP

Ich konvertierte die Zieldateien nicht im laufenden Betrieb, sondern in der Build Phase. GULP bietet hierfür die Module "gulp-sass" und "gulp-pug" an:

SASS ist wie folgt konfiguriert:

gulp.task('styles', function() {  
    gulp.src('src/sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

Und die Konvertierung von PUG erfolgt mit diesen GULP Task:

// Convert Pug formally known as Jade to html
gulp.task('pug', () => {  
    gulp.src([
        'src/pug/**/*.pug','!src/pug/include/**'
        ])
      .pipe(pug({
          pretty: true
      }))
      .pipe(gulp.dest('dist/views'));
});

Zusammenfassung

Ich hoffe, dass ich mit meinen Ausführungen klar machen konnte, dass man Entkopplung und Code-Doppelungen mit den Tools PUG und SASS sparen kann. Die Wartbarkeit und Pflege wird einfacher. Beide Tools haben keine hohe Lernkurve und sind innerhalb kurzer Zeit erlernbar, wenn man bereits Erfahrung in HTML und CSS besitzt, wenn nicht dann sollte man allerdings mit HTML/CSS zunächst beginnen.

Den aktuellen Stand kann man sich unter folgenden Link ansehen und mit GIT auch gerne herunterladen: https://github.com/smoki99/base-nodejs-angular-gulp/tree/ninja-20160714