7.2. Erstellen von Themes auf Basis von Bootstrap. Kompilieren von SASS mit Gulp

In der letzten Lektion haben wir gesehen, wie man LESS mit dem eingebauten Watcher in PhpStorm kompiliert. In diesem Tutorial erstellen wir ein Theme basierend auf SASS Bootstrap. Wenn Sie Schwierigkeiten mit LESS und der Kompilierung über PhpStorm haben, können Sie Gulp und SASS ausprobieren. In diesem Stadium der Lektionen ist es für uns egal, ob wir LESS oder SASS verwenden. Ich empfehle jedoch SASS und Gulp, da die Kompilierung schneller ist und Gulp einfacher zu konfigurieren ist.

Gulp ist ein Aufgabenmanager für JavaScript. Wir werden ihn verwenden, um zwei Aufgaben hinzuzufügen: eine, die Änderungen im SASS-Ordner überwacht, wenn wir Styles hinzufügen, und die zweite, die SASS in CSS kompiliert.

Kommen wir zur Installation. Ich habe Drupal installiert. Jetzt müssen Sie das Bootstrap-Theme herunterladen und in den /themes-Ordner legen:

https://www.drupal.org/project/bootstrap

Um SASS in den Bootstrap-Unterthemen zu verwenden, benötigen wir dieses Kit namens sass:

Kopieren Sie diesen sass-Ordner separat vom Bootstrap in den /themes-Ordner und benennen Sie ihn in den Namen Ihres Themes um, ich werde drupalbook verwenden:

Jetzt müssen Sie alle Dateien von THEMENAME in den Namen Ihres Themes umbenennen. Zum Beispiel muss die Datei THEMENAME.starterkit.yml in drupalbook.info.yml umbenannt werden. THEMENAME.libraries.yml muss in drupalbook.libraries.yml umbenannt werden und so weiter. Vergessen Sie nicht, auch die Dateien im Ordner config files umzubenennen, dort sind ebenfalls Dateien mit THEMENAME:

In den Dateien selbst kann ebenfalls THEMENAME vorkommen, z.B. in sass/config/schema/THEMENAME.schema.yml:

Um sicherzugehen, dass Sie nichts übersehen haben, suchen Sie in PhpStorm im gesamten Unterthemen-Ordner nach THEMENAME:

Geben Sie THEMENAME in die Suche ein und ersetzen Sie es an allen Stellen durch den Namen Ihres Themes.

Jetzt müssen Sie Bootstrap selbst herunterladen und in den Ordner /themes/drupalbook/bootstrap legen:

https://getbootstrap.com/docs/4.3/getting-started/download/

https://getbootstrap.com/docs/3.3/getting-started/

Wir interessieren uns für die SASS-Version von Bootstrap:

Für unser Theme benötigen wir den gesamten Bootstrap-Ordner, sodass der Pfad zum assets-Ordner /themes/drupalbook/bootstrap/assets lautet:

Wir haben alle für das Theme nötigen Dateien kopiert, jetzt müssen wir Gulp einbinden, um SASS zu kompilieren.

Zuerst müssen wir Node.js installieren:

https://nodejs.org/en/

Node.js ist eine JavaScript-Laufzeitumgebung, die es ermöglicht, Code auszuführen, um SASS in CSS zu kompilieren. Es wird unter Windows wie ein normales Programm installiert. Es ist besser, die neueste Version herunterzuladen, aktuell 7.x.x:

Nachdem Sie Node.js installiert haben, müssen Sie PhpStorm oder die CMD-Konsole neu starten, falls geöffnet. Die Konsole für Node.js kann in PhpStorm geöffnet werden:

Oder über das Windows-Menü:

Geben Sie in der Konsole node -v ein, um zu prüfen, ob Node.js korrekt installiert ist:

Nun wechseln wir in den Ordner mit unserem drupalbook-Theme und installieren Gulp. Gehen Sie mit dem Befehl cd durch die Ordner. Der Befehl cd .. (cd Leerzeichen zwei Punkte) wechselt in das übergeordnete Verzeichnis:

Um die Partition zu wechseln, geben Sie z.B. D: ein, um zum Laufwerk D zu wechseln.

Im Theme-Ordner angekommen, installieren wir Gulp mit dem npm-Paketmanager, der zusammen mit Node.js installiert wird. Zuerst initialisieren wir die npm-Komponenten:

npm init

Dies erzeugt für uns die package.json, in der alle über npm installierten Pakete vermerkt werden. Drücken Sie bei den Abfragen einfach Enter:

Die package.json sieht dann so aus:

{
  "name": "bootstrap-sass",
  "version": "3.3.7",
  "description": "bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.",
  "main": "assets/javascripts/bootstrap.js",
  "style": "assets/stylesheets/_bootstrap.scss",
  "sass": "assets/stylesheets/_bootstrap.scss",
  "files": [
    "assets",
    "eyeglass-exports.js",
    "CHANGELOG.md",
    "LICENSE",
    "README.md"
  ],
  "repository": {
    "type": "git",
    "url": "git://github.com/twbs/bootstrap-sass"
  },
  "keywords": [
    "bootstrap",
    "sass",
    "css",
    "eyeglass-module"
  ],
  "contributors": [
    "Thomas McDonald",
    "Tristan Harward",
    "Peter Gumeson",
    "Gleb Mazovetskiy"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/twbs/bootstrap-sass/issues"
  },
  "devDependencies": {
    "node-sass": "^3.8.0",
    "mincer": "~1.4.0",
    "ejs": "~2.4.2"
  },
  "eyeglass": {
    "exports": "eyeglass-exports.js",
    "needs": "^0.7.1"
  }
}

Nun installieren wir Gulp mit:

npm install --save-dev gulp

Danach installieren wir gulp-sass:

npm install --save-dev gulp-sass

Für Gulp 4.x benötigen Sie folgenden Gulpfile.js Code:

// Gulpfile.js für stratumui,
// ein CSS Framework verfügbar auf npmjs.com
var gulp    = require('gulp'),
    sass    = require('gulp-sass'),
    concat  = require('gulp-concat'),
    uglify  = require('gulp-uglify');
 
var paths = {
  styles: {
    src: 'scss/**/*.scss',
    dest: 'css'
  }
};
 
function styles() {
  return gulp
   .src(paths.styles.src, {
      sourcemaps: true
    })
    .pipe(sass())
    .pipe(gulp.dest(paths.styles.dest));
}
 
function watch() {
  gulp.watch(paths.styles.src, styles);
}
 
var build = gulp.parallel(styles, watch);
 
gulp.task(build);
gulp.task('default', build);

Wir haben gulp und gulp-sass installiert, jetzt müssen wir die Aufgaben für gulp anlegen. Erstellen Sie dazu die Datei Gulpfile.js im Root-Ordner des Themes:

/themes/drupalbook/Gulpfile.js

Für gulp 4.x benötigen Sie zusätzlich folgende Bibliotheken:

npm install gulp-concat
npm install gulp-uglify

Wir haben festgelegt, dass die SASS-Dateien ins css-Verzeichnis kompiliert werden. Dieses Verzeichnis existiert im Theme noch nicht, erstellen Sie es bitte, und legen Sie dort die Datei style.css an:

/themes/drupalbook/css/style.css

Diese Datei wird unser gesamtes kompiliertes CSS enthalten.

Nun sind wir bereit, die SASS-Kompilierung zu starten. In PhpStorm wechseln Sie in den Theme-Ordner, klicken mit der rechten Maustaste auf Gulpfile.js und wählen Sie im Kontextmenü „Show Gulp Tasks“:

Wählen Sie die Default-Task aus, das Fenster öffnet sich sofort:

Jetzt wird bei jeder Änderung an den SASS-Dateien im Theme gulp die Kompilierung automatisch starten.

Nach der Kompilierung wird die CSS in style.css erscheinen und die Hintergrundfarbe der Seite wird gelb:

Zunächst mag die Einrichtung von Gulp langwierig erscheinen, aber wenn Node.js bereits installiert ist, müssen Sie nur noch die Gulpfile.js-Datei hinzufügen und die Pakete gulp und gulp-sass installieren. Wenn Sie Probleme bei der Installation oder Einrichtung haben, schreiben Sie gerne einen Kommentar.