Servereless Website - Automatisierte Prozesse mit Gulp (Part 2)

Wie in unserem vorherigen Post über unsere Webseite ohne sogenanntes Backend beschrieben, benutzen wir für unsere automatisierten Prozesse das Toolkit Gulp!

Aber was ist Gulp?

Gulp ist ein open-source Toolkit, basierend auf Node.js und npm, um nervige und zeitraubende Tasks für effiziente Frontend Entwicklung zu automatisieren.
Hier mal die ersten Schritte die notwendig sind um Gulp in einem Projekt einzusetzen.

1. Bereitet euren Rechner vor!

Stellt sicher, dass Node.js auf eurem Rechner installiert ist. Falls nicht, hier könnt ihr die aktuelle Version herunterladen: https://nodejs.org/

2. Erstellt eine package.json Datei!

Nachdem Node.js installiert ist, braucht es eine package.json Datei. Darin sind die npm Pakete enthalten die für euer Projekt benötigt werden.

3. Jetzt wird es Zeit für die gulpfile.js und den benötigten Code

Nachdem die Datei gulpfile.js erstellt wurde, können wir den Code hinzufügen, der die eigentliche Arbeit machen soll. Diese Datei beginnt mit der Deklaration der npm Module, welche für die folgenden Build Prozesse benötigt werden 

In unserem Fall wird mehr gemacht als nur die dynamischen Nunjucks Dateien aus dem vorherigen Serverless Post in valides HTML zu automatisieren..
Viele der Tasks sind aus unterschiedliche Webprojekten sicherlich bekannt und können jedem Projekt einen Mehrwert verschaffen.

• Automatisches Erstellen aller Blogbeiträge inklusive URL-Pfad und Routing aus einem JSON File
• Automatisches Erstellen von AMP Dateien aus den Blogbeiträgen
• Kompilierung der SASS Files in valides CSS
• Komprimierung der Quellcodes
• Minifizierung aller Bilder und Bereitstellung als webp Datei
• Komprimierung aller CSS und JS Dateien in eine minifizierte Datei
• Automatisierte Erstellung einer Sitemap
• Entfernung von unbenutztem Quellcode (z.Bsp.: CSS), usw.

In diesem Post wollen wir aber bei unserer Intention bleiben, die dynamischen Nunjucks Templates zu rendern um eine komplette Webseite daraus zu erstellen.

Alles was dieses Javascript macht, ist aus den Sourcedateien das Nunjucks zu rendern und über den Befehl pipe es als komprimiertes HTML in den Destination Pfad zu speichern. Typischerweise greift der Server auf alle Dateien des dist Ordners zu und lässt die Webanwendung dort laufen. Zusätzlich werden noch ein paar Variablen aus der combined.json in die Umgebungsvariablen geschrieben, damit diese in Nunjucks zu verwenden sind. Viel mehr macht dieser Codeschnipsel dann eigentlich auch nicht.
Selbstverständlich lassen sich jede Menge unterschiedliche Prozesse in dem gulpfile.js festhalten. Natürlich individuell für die Anforderungen des Projekts.

4. Weiter gehts: Entwicklungsumgebung einrichten!

• Terminal Fenster öffnen
• In den Ordner des gulpfile.js und der package.json wechseln
• npm install aufrufen

Dieser Befehl installiert alle in der package.json aufgeführten Paktete und sollte einen Ordner namens node_modules erstellen.

5. Ordnerstruktur erstellen!

Erstellt jetzt die korrekte Ordnerstruktur mit src, assets, etc Ordnern

6. GULP Kommandos ausführen!

Falls man mehrere Tasks hat, können diese auch in einem Befehl asynchron ausgeführt werden.

Diese Anweisung führt alle Tasks aus -> schreibt die korrekten Files in den Distribution Ordner -> und öffnet die Anwendung lokal!

So, und jetzt viel Spaß beim Automatisieren!

In dem Blogbetrag sind natürlich nur kleine Teilbereiche eines kompletten Projekts beschrieben und soll dem allgemeinen Verständnis dienen.

Wer ein komplettes und funktionierendes Projekt mit Gulp erstellen will, findet im Internet sicher viele Tutorials - Übung macht den Meister! Oder frag uns

Zugegebenermaßen ist GULP auch nicht mehr der aller neueste Stand und webpack vereinfacht mittlerweile noch mehr, aber es ist ein wunderbares Tool um komplexe und wiederkehrende Prozesse und Entwicklungsarbeit zu vereinfachen und zu automatisieren.