Bower und Gulp für ein Contao 4 - Projekt einrichten

Im ersten Teil haben wir uns eine Contao 4 - Beispielkonfiguration anlegt, welche wir im folgenden Teil etwas gestalten möchten. Bei dieser Gelegenheit möchte ich gleich noch zeigen, wie man SCSS automatisch zu CSS, mit Gulp kompilieren lassen kan

Zu allererst benötigen wir nodejs um den NodeJs Package-Manager (NPM) benutzen zu können.

sudo apt-get install nodejs

Bower initialisieren

Da wir Frontend-Libaries nicht händisch downloaden und einbinden möchten, installieren wir Bower, welcher uns die Abhängigkeiten auflöst und die benötigten Pakete downloaded. Wir installieren als erstes Bower als globale Anwendung:

sudo npm install -g bower

...und initialisieren unser Projekt mit:

bower init

Wenn folgende Fehlermeldung auftaucht:

/usr/bin/env: node: Datei oder Verzeichnis nicht gefunden

...muss noch ein Symbolischer Link im bin-Verzeichnnis angelegt werden:

sudo ln -s /usr/bin/nodejs /usr/bin/node

Wenn alle Fragen zur Initialisierung beantwortet wurden, finden wir eine bower.json im Projektverzeichnis. Über Bower beziehen wir schließlich jQuery und Bootstrap.

bower install jquery --save-dev
bower install bootstrap --save-dev

Hinweis: Pakete für Bower können bequem über bower.io gesucht und gefunden werden.

Gulp initialisieren

Für das konvertieren von SCSS zu CSS wählen wir Gulp aus. Dafür müssen erst einmal die node modules initialisiert werden:

npm init

Im Anschluss wird gulp als globale Anwendung installiert:

sudo npm install gulp -g

...und projektbezogen mit seinen SCSS/SASS-Freunden bezogen:

npm install gulp gulp-sass gulp-sourcemaps gulp-minify-css gulp-concat --save-dev

Gulp.js - Steuerung

Für die Steuerung der Konvertierung legen wir im Projektverzeichnis eine JavaScript-Datei mit dem Namen "gulpfile.js" an.

var gulp = require('gulp'),
	sass = require('gulp-sass'),
	sourceMaps = require('gulp-sourcemaps'),
	minifyCss = require('gulp-minify-css'),
	concat = require('gulp-concat');

var config = {
	themeDir: './files/data/theme',
	bowerDir: './bower_components',
	destinationDir: './files/data/theme',
	destinationCssDir: './files/data/theme/css'
};

gulp.task('css-default', function ()
{
	gulp.src(
		[
			config.bowerDir + '/bootstrap/dist/css/bootstrap.min.css',
			config.themeDir + '/scss/default.scss'
		])
		.pipe(sourceMaps.init())
		.pipe(sass({
			includePaths: [
				config.bowerDir + '/bootstrap-sass/stylesheets/stylesheets'
			]
		}).on('error', sass.logError))
		.pipe(minifyCss())
		.pipe(sourceMaps.write())
		.pipe(concat('default.css'))
		.pipe(gulp.dest(config.destinationCssDir))
	;
});

gulp.task('watch-css-default', function()
{
	gulp.watch(config.themeDir + '/scss/*.scss', ['css-default']);
});

Eigenen Style anlegen

Für eigene Styles legen wir eine default.scss in unserem Theme-Ordner an (files/data/default-theme/scss/default.scss), welche ein paar Styles spendiert bekommt:

body {
	background: #ffffff;
}

#wrapper {
	&.container {
		min-height: 500px;
		margin-top: 50px;
		border-radius: 2px;
		box-shadow: 0 0 24px 2px rgb(128,128,128);
	}
}

CSS-Files können anschließt mit dem Befehl:

gulp css-default

...konvertiert werden. Im konkreten Beispiel, wird Bootstrap (Alle abhängigen SCSS-Dateien) einschließlich unserer "default.scss" zur "default.css" rendern. Das Rendern der CSS-Datei geschieht relativ schnell, so dass keine Wartezeiten aufkommen.

Gulp.js - Watcher konfigieren

Damit wir den Befehl nicht immer, bei jeder Änderung, ausführen müssen, können wir den SCSS-Watcher die Arbeit überlassen. Diesen können wir entweder über die Konsole erledigen:

gulp watch-css-default

...oder uns diesen Watcher bequem im PhpStorm einrichten. Dazu legen wir eine neue "Gulp.js" - Konfiguration an (Run » Edit configurations » Add new configuration).

Nach dem Einrichten steht uns der Run-Task im Projekt zur Verfügung.

Mit einem Klick auf Run wird der Watcher gestartet und bei Focusverlust von PhpStorm, wird automatisch der Inhalt in eine CSS-Datei gerendert.

Styles in Contao einbinden

Um den Style auch auf unsere Contao4-Beispielseite anwenden zu können, müssen wir noch die gerenderte CSS-Datei in das Theme integrieren (Layout » Themes » Seitenlayout » default » Externe Stylesheets).

Standard-Template klonen

Damit wir das Grid-System von Bootstrap nutzen können, erzeugen wir eine Kopie des "fe_page" - Templates. Dafür begeben wir uns Themes » Templates » Neues Template erstellen.

Für eine eindeutige Zuordnung, benennen wir noch das Template in "fe_page_custom" um.

Im Anschluss können wir das modifizierte Template dem Seitenlayout zuweisen (Layout » Themes » Seitenlayout » default » Experten-Einstellungen » Seitentemplate). Flugs in die Frontend-Ansicht, können wir uns das Ergebnis anschauen: