Gulpfile.js Readme

Diese Gulpfile.js ist ein Konfigurations- und Build-Skript für ein Frontend-Projekt. Es verwendet Gulp, um verschiedene Aufgaben zu automatisieren, wie das Kompilieren von SCSS zu CSS, das Erzeugen von Iconfonts, das Minifizieren von CSS und JS-Dateien, das Generieren von Styleguides und das Kopieren von Dateien an verschiedene Zielorte.

Installation

Installation der Abhängigkeiten: Stelle sicher, dass Node.js installiert ist, und führe dann im Projektverzeichnis den Befehl npm install aus, um alle benötigten Abhängigkeiten aus der package.json-Datei zu installieren.

npm install

Konfiguration

Die Datei config.json enthält die Konfiguration für das Frontend-Projekt. Hier werden verschiedene Einstellungen für die verschiedenen Themes, Iconfonts, Favicon und Browsersync definiert. Du kannst die Optionen anpassen, um sie an die Anforderungen deines Projekts anzupassen. Über die Variable "type" kannst du definieren, welches Theme du anpassen möchtest.

Ausführen der Aufgaben

Für die Entwicklung

Führe den Befehl "gulp default" oder "gulp" aus, um den Entwicklungsmodus zu starten. Dies wird einen lokalen Server starten, der dein Projekt unter "localhost:3000" verfügbar macht. Änderungen an SCSS- oder JS-Dateien werden automatisch erkannt und die entsprechenden Dateien neu kompiliert, und der Browser wird neu geladen. Über den Parameter "type" kannst du unabhängig von der eingestellten config.json ein bestimmtest Theme starten.

gulp default

gulp default --type'b2c'

Für die Produktion

Führe den Befehl "gulp public" aus, um die Build-Version für die Produktion des jeweiligen Themes zu erstellen. Dies wird CSS und JS minifizieren und optimieren, Iconfonts umbenennen und Styleguides generieren.

gulp public

Möchtest du alle Theme auf einmal builden, dann verwende bitte "npm run gulp public"

npm run gulp public

Kopieren eines Default Themes

Du kannst die Gulp-Aufgaben auch verwenden, um ein neues Theme basierend auf einem vorhandenen Theme zu erstellen.

Für ein neues Default-Theme verwende "gulp copyBaseLayout --type 'b2c' --layoutcode 'new_theme'" mit dem Parameter "--type" für das zu kopierende Theme und den Paramter --layoutcode für den neuen Themecode

gulp copyBaseLayout --type "b2c" --layoutcode "new_theme"

Hier wird das Default-Theme "b2c" als Vorlage genommen, und ein neues Theme mit dem Namen "new_theme" wird erstellt.

Generierung Favicons

Für die Generierung der Favicons pro Theme führe aus "gulp generate-favicons"

gulp generate-favicon

Generierung Styleguide

Für die Generierung des Styleguides pro Theme führe aus "gulp generate-stylegude"

gulp generate-stylegude

Die Gulpfile.js ist ein leistungsfähiges Tool, um die Entwicklung und den Build-Prozess für dein Frontend-Projekt zu optimieren und zu automatisieren.

Viel Erfolg bei deinem Projekt!