7.2. Thema’s maken op basis van Bootstrap. SASS compileren via Gulp

In de vorige les hebben we bekeken hoe je LESS kunt compileren met de ingebouwde watcher in PhpStorm. In deze les maken we een thema op basis van SASS Bootstrap. Als het je niet lukt om met LESS en compilatie via PhpStorm te werken, kun je proberen Gulp en SASS te gebruiken. In deze fase van de lessen maakt het niet zoveel uit of we LESS of SASS gebruiken. Toch raad ik aan om SASS en Gulp te gebruiken, omdat compilatie sneller gaat en Gulp eenvoudiger te configureren is.

Gulp is een taakbeheerder voor JavaScript. We gebruiken het om twee taken toe te voegen: één om wijzigingen in de sass-map te volgen wanneer we stijlen toevoegen, en een tweede taak om SASS naar CSS te compileren.

Laten we doorgaan met de installatie. Ik heb Drupal geïnstalleerd. Nu moet je het Bootstrap-thema downloaden en in de map /themes plaatsen:

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

Om SASS te gebruiken in een Bootstrap-subthema, moeten we deze set gebruiken, genaamd sass:

Kopieer deze sass-map naar de map /themes (apart van Bootstrap) en hernoem deze naar de naam van jouw thema. Ik noem het drupalbook:

Nu moet je alle bestanden hernoemen van THEMENAME naar de naam van jouw thema. Bijvoorbeeld: het bestand THEMENAME.starterkit.yml moet worden hernoemd naar drupalbook.info.yml. Het bestand THEMENAME.libraries.yml moet worden hernoemd naar drupalbook.libraries.yml, enzovoort. Vergeet ook niet om de configuratiebestanden in de map config te hernoemen — die bevatten ook THEMENAME:

Binnen de bestanden kan THEMENAME ook voorkomen, bijvoorbeeld in sass/config/schema/THEMENAME.schema.yml:

Om er zeker van te zijn dat je niets hebt gemist, zoek naar THEMENAME in de volledige subthemamap via PhpStorm:

Typ THEMENAME in de zoekopdracht en vervang het waar nodig door de naam van jouw thema.

Nu moet je Bootstrap zelf downloaden en in de map /themes/drupalbook/bootstrap plaatsen:

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

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

We hebben de SASS-versie van Bootstrap nodig:

Voor ons thema hebben we de volledige Bootstrap-map nodig, zodat het pad naar de assets-map er zo uitziet: /themes/drupalbook/bootstrap/assets

We hebben nu alle bestanden gekopieerd die nodig zijn voor het thema. Nu moeten we Gulp inschakelen om SASS te compileren.

Eerst moeten we Node.js installeren:

https://nodejs.org/en/

Node.js is een JavaScript-runtime waarmee je code kunt uitvoeren, zoals het compileren van SASS naar CSS. Het wordt op Windows geïnstalleerd als een gewoon programma. Download bij voorkeur de nieuwste versie (bijvoorbeeld 7.x.x):

Na de installatie van Node.js moet je PhpStorm of de CMD-console opnieuw opstarten. De console voor Node.js kan worden geopend vanuit PhpStorm:

Of via het menu van Windows:

Typ in de console node -v om te controleren of Node.js correct is geïnstalleerd:

Vervolgens moeten we naar de map van ons drupalbook-thema gaan en Gulp installeren. Navigeer door de mappen met het commando cd. Het commando cd .. brengt je één map omhoog:

Om van station te wisselen, typ bijvoorbeeld D: (waarbij D de stationsletter is) om naar de juiste schijf te gaan:

Nu we in de map van het thema zitten, installeren we Gulp via de npm-pakketbeheerder (deze wordt automatisch met Node.js geïnstalleerd). Initialiseer eerst een nieuw npm-project:

npm init

Dit maakt het bestand package.json aan, waarin alle via npm geïnstalleerde pakketten worden vermeld. Druk gewoon op Enter bij elke vraag:

Als resultaat wordt het volgende package.json-bestand aangemaakt:

{
  "name": "bootstrap-sass",
  "version": "3.3.7",
  "description": "bootstrap-sass is een Sass-aangedreven versie van Bootstrap 3.",
  ...
}

Voer nu het volgende commando uit om Gulp te installeren:

npm install --save-dev gulp

Installeer vervolgens het pakket gulp-sass:

npm install --save-dev gulp-sass

Als je Gulp 4.x gebruikt, gebruik dan de volgende Gulpfile.js code:

// Gulpfile.js
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);

Maak het bestand Gulpfile.js aan in de hoofdmap van het thema:

/themes/drupalbook/Gulpfile.js

Voor Gulp 4.x moet je ook extra bibliotheken installeren:

npm install gulp-concat
npm install gulp-uglify

We hebben ingesteld dat SASS-bestanden in de css-map worden gecompileerd, maar deze map bestaat nog niet. Maak hem aan en voeg er een leeg bestand style.css aan toe:

/themes/drupalbook/css/style.css

Dit bestand zal al onze gecompileerde CSS bevatten.

Alles is nu klaar om SASS te compileren. Ga in PhpStorm naar de themamap, klik met de rechtermuisknop op Gulpfile.js en selecteer Show Gulp Tasks in het contextmenu:

Selecteer de taak default en het uitvoervenster zal verschijnen:

Nu zal Gulp automatisch SASS opnieuw compileren telkens wanneer er iets in onze thema-SASS-bestanden verandert.

Als resultaat verschijnt de CSS in ons style.css-bestand en verandert de achtergrondkleur van de site in geel:

In het begin lijkt het misschien dat het instellen van compilatie via Gulp lang duurt, maar als je Node.js al hebt geïnstalleerd, hoef je alleen het bestand Gulpfile.js toe te voegen en de pakketten gulp en gulp-sass te installeren. Als je problemen hebt met installatie of configuratie, laat het weten in de reacties.