Roger Kuik

Webdesigner & Front-End Developer

Beginnen met Gulp en Sass

Gulp.js Logo

Wat is Gulp?

Gulp is een op Javascript gebaseerde tool waarmee je (veelvoorkomende) taken die je tijdens het (web) development proces tegenkomt kunt automatiseren.

Je kunt bijvoorbeeld:

  • Sass bestanden omzetten naar CSS
  • Sass en Javascript bestanden controleren op fouten
  • CSS en Javascript bestanden verkleinen en samenvoegen

De complete lijst van mogelijke toepassingen/plugins is te vinden op de pluginpagina van Gulp.

In dit artikel kijken we naar de installatie van Gulp en hoe je Gulp kunt gebruiken in je projecten om bijvoorbeeld Sass bestanden om te zetten naar CSS.

Gulp installeren

Voordat je Gulp kunt installeren zal je eerst Node.js moeten downloaden en installeren.
Als je Node.js (al) geïnstalleerd hebt kun je met de Commandline (CMD) van Windows of de Terminal van OSX het volgende commando uitvoeren:

npm -v

Als Node.js correct is geïnstalleerd zal dit commando een versienummer teruggeven in het venster.

Vervolgens kun je Gulp installeren via het volgende commando:

npm install gulp -g

Op deze manier installeer je Gulp 'globaal' wat wil zeggen dat je Gulp in iedere map kan uitvoeren.

Om te controleren of Gulp correct is geïnstalleerd voer je het volgende commando uit:

gulp -v

Het commando zal het versienummer van Gulp teruggeven in het venster.

We kunnen Gulp nu gebruiken in onze projecten.

Nieuw project met Gulp en Sass

Maak eerst een nieuwe map aan waar je het project wilt starten, bijvoorbeeld in een overkoepelende 'Projecten' map.

Navigeer met de commandline naar de betreffende map op je systeem (in mijn voorbeeld de map 'NieuwProject' in de 'Projecten' map op de P schijf).

Het volgende commando is voor Windows om direct naar die map te gaan.

cd /d P:\Projecten\NieuwProject

In de projectmap kunnen we nu Gulp en de Gulp-Sass plugin installeren om in dit project te gebruiken.

Typ achtereenvolgens de volgende commando's in en laat ieder zijn werk doen.

npm init
npm install --save-dev gulp
npm install --save-dev gulp-sass

Het eerste commando zal een nieuw node project opzetten en package.json aanmaken waarin de details van het project staan, bijvoorbeeld welke plugins het gebruikt/nodig heeft. Je zult gevraagd worden om een projectnaam, beschrijving, versie en startpunt (bijv. index.html) in te vullen maar alleen de projectnaam is verplicht.

De volgende zal Gulp installeren in de projectmap en als die klaar is kun je het derde commando uitvoeren en de gulp-sass plugin installeren. Je zult zien dat in de projectmap nu een package.json staat met de details van het project en een node_modules map met de benodigde plugins.

Voeg aan de projectmap de index.html, de mappen sass en css toe en in de sass map een style.scss zodat de structuur er als volgt uitziet.

[css]
[node_modules]
[sass]
- style.scss
index.html
package.json

Gulpfile.js

Het belangrijkste aan Gulp is natuurlijk de Gulpfile zelf, het kloppend hart. Een Gulpfile bestaat gemakshalve uit drie onderdelen: de benodigde modules, losse taken en een standaard taak.

Maak in de projectmap een bestand aan genaamd gulpfile.js. Die gaan we vullen met de benodigde stukjes code.

Als eerste krijgen we de modules die we zojuist geïnstalleerd en nodig hebben (Gulp en Gulp-Sass).

var gulp = require('gulp');
var sass = require('gulp-sass');

Daarna maken we een taak genaamd 'styles' aan die de stijlen in de SCSS map naar CSS omzet en een bestand in de CSS map aanmaakt. Mocht er zich een fout voordoen dan krijg je een melding te zien.

gulp.task('styles', function() {
    return gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'))
});

Als laatste maken we een standaard taak aan die de losse taken achtereenvolgens uitvoert en die de SCSS map in de gaten houdt voor veranderingen. Zodra dat gebeurd zal deze zijn taak uitvoeren wat in dit geval het omzetten van SCSS naar CSS is.

gulp.task('default',function() {
    gulp.watch('sass/**/*.scss',['styles']);
});

Als je alles tot hier hebt gevolgd dan kun je met het volgende commando de taak in gang zetten.

gulp

Een wijziging in de SCSS map (in bijvoorbeeld style.scss) zal de taak in gang zetten en een nieuw CSS bestand aanmaken in de CSS map met de verwerkte wijzigingen.