Gulp: De Basis – Wat is het en hoe gebruik je het?

Als je met webontwikkeling bezig bent, weet je dat sommige taken steeds herhaald moeten worden: CSS en JavaScript minificeren, afbeeldingen optimaliseren, bestanden samenvoegen, of een live server draaien. Dit kan tijdrovend zijn, en dat is waar Gulp van pas komt!

In deze blogpost leer je:
✅ Wat Gulp is en waarom je het zou moeten gebruiken.
✅ Hoe je Gulp installeert en een gulpfile.js aanmaakt.
✅ Welke taken je met Gulp kunt automatiseren.

1. Wat is Gulp?

Gulp is een task runner voor JavaScript, waarmee je veelvoorkomende ontwikkeltaken automatisch kunt uitvoeren. Je schrijft een set instructies in een gulpfile.js, en Gulp voert deze taken razendsnel uit met behulp van streams.

🔥 Waarom Gulp gebruiken?

✔ Automatiseer herhalende taken zoals CSS en JS minificeren, SCSS compileren en browser live reloaden.
✔ Sneller werken zonder handmatig bestanden te optimaliseren.
✔ Flexibel en eenvoudig dankzij een grote community en veel plugins.

2. Installatie van Gulp

Om met Gulp te beginnen, heb je Node.js nodig. Controleer eerst of je Node.js geïnstalleerd hebt:

node -v
npm -v

Heb je Node.js nog niet? Download het via nodejs.org.

Gulp installeren

Installeer Gulp globaal op je computer:

npm install --global gulp-cli

Maak een nieuwe projectmap en ga daar naartoe:

mkdir mijn-gulp-project
cd mijn-gulp-project

Initialiseer npm:

npm init -y

Dit maakt een package.json bestand aan. Nu installeren we Gulp lokaal in het project:

npm install --save-dev gulp

3. De Gulpfile: Jouw Automatiseringsscript

Gulp werkt met een gulpfile.js waarin je taken definieert. Maak een bestand aan genaamd gulpfile.js in de hoofdmap van je project.

touch gulpfile.js

Open dit bestand en voeg de basis Gulp-configuratie toe:

// Gulp laden
const { src, dest, watch, series, parallel } = require("gulp");

// CSS minificeren
const cleanCSS = require("gulp-clean-css");

// JavaScript minificeren
const uglify = require("gulp-uglify");

// SASS compileren naar CSS
const sass = require("gulp-sass")(require("sass"));

// Browser Sync voor live herladen
const browserSync = require("browser-sync").create();

4. Veelvoorkomende Gulp Taken

1️⃣ SCSS compileren naar CSS

Als je SCSS/SASS gebruikt, wil je dat deze automatisch wordt omgezet naar CSS:

function styles() {
  return src("src/scss/**/*.scss") // Input-bestanden
    .pipe(sass().on("error", sass.logError)) // Compileer SCSS
    .pipe(cleanCSS()) // Minificeer CSS
    .pipe(dest("dist/css")) // Output-map
    .pipe(browserSync.stream()); // Live herladen
}

2️⃣ JavaScript minificeren

Om JavaScript bestanden te verkleinen en optimaliseren, gebruiken we uglify:

function scripts() {
  return src("src/js/**/*.js") // Input-bestanden
    .pipe(uglify()) // Minificeer JS
    .pipe(dest("dist/js")) // Output-map
    .pipe(browserSync.stream()); // Live herladen
}

3️⃣ Live herladen met Browser Sync

Met Browser Sync zorgen we ervoor dat wijzigingen direct zichtbaar zijn in de browser:

function reload(done) {
  browserSync.reload();
  done();
}

function serve() {
  browserSync.init({
    server: {
      baseDir: "./dist", // Root-map van de server
    },
  });
  watch("src/scss/**/*.scss", styles); // SCSS bestanden
  watch("src/js/**/*.js", scripts); // JavaScript bestanden
  watch("dist/*.html", reload); // HTML bestanden
}

4️⃣ Bestanden automatisch volgen (Watch functie)

We kunnen Gulp zo instellen dat het continu controleert op wijzigingen:

function watchFiles() {
  watch("src/scss/**/*.scss", styles);
  watch("src/js/**/*.js", scripts);
  watch("dist/*.html", reload);
}

5. Taken combineren met Gulp

We kunnen alle taken samenvoegen in één commando:

exports.default = series(parallel(styles, scripts), serve);

Met dit commando start je Gulp en Browser Sync in één keer:

gulp

Wil je alleen CSS en JS compileren zonder de live server? Gebruik dan:

gulp styles
gulp scripts

6. Overzicht van de Gulp Taken

7. Waarom Gulp gebruiken in 2025?

Met de opkomst van Webpack en Vite wordt Gulp minder vaak gebruikt in moderne frontend-development workflows. Toch blijft Gulp een lichtgewicht en krachtige oplossing voor:

✅ Kleine tot middelgrote projecten.
✅ Snelle en eenvoudige automatisering zonder complexe configuraties.
✅ Werken met SASS, minificatie en browser live reloaden.

Als je een full-scale React of Vue-app bouwt, is Webpack of Vite wellicht een betere keuze. Maar voor WordPress- en klassieke HTML/CSS-projecten blijft Gulp een fantastische optie!

Conclusie

Met Gulp kun je je workflow enorm versnellen door repetitieve taken te automatiseren. Door SCSS te compileren, bestanden te minificeren en live herladen te gebruiken, bespaar je uren werk! 🚀