Node.js und das Modul Gulp können bei Arbeiten an einer Website praktische Helfer sein. Wenn man beispielsweise bereits mit SASS arbeitet und nicht die integrierten Compiler, wie etwa von Dreamweaver CC nutzen will, kann in wenigen Schritten Node.js und Gulp auf dem Testserver (oder lokal) installieren. Was macht Gulp? Gulp ist ein sog. Task-Runner od. streaming build system. So können etwas komplexe Datenstrukturen von CSS und JavaScript automatisiert zusammengefasst, minifiziert und in HTML eingebunden werden.

Auf welche Umgebung bezieht sich dieser Beitrag?

  • OpenSUSE Leap 15.1
  • NodeJS 10.16.0
  • Gulp 4.0.2
  • Gulp CLI 2.2.0

Was brauchen wir dazu?

  • Node.js (hier in der Version 10.16.0)
  • Die Node Module
    • gulp (hier in der Version 4.0.2)
    • gulp-sass
    • gulp-clean-css
    • gulp-rename
    • gulp-watch
  • Gulp CLI (hier in der Version 2.2.0)

Eines Vorweg. Im Gegensatz zu der Vorgängerversion von Gulp hat sich einiges geändert. Insbesondere die Art, wie ein Task abgearbeitet wird. Hier lohnt sich ein Blick ins Netz um die Änderungen zu berücksichtigen.

Was soll gemacht werden?

  • SCSS Dateien sollen gesammelt und in eine CSS Datei kompiliert werden
  • Die CSS Datei soll für die finale Verwendung minifiziert werden

Welche Verzeichnisse werden gebraucht?

  • Ein Projektverzeichnis
  • Ein Verzeichnis „sass“ für die SASS Quelldateien
  • Ein Verzeichnis „css“ für die komiplierte CSS Datei
  • Ein Verzeichnis „dist“ für die finale, minifizierte CSS Version

Sind Node.js und die notwendigen Gulp-Module installiert kann die Datei „gulpfile.js“ direkt über die Kommandozeile ausgeführt werden. Zusätzlich werden im default-Task Änderungen in den „sass“ und „css“ Verzeichnissen beobachtet. Ändert sich eine Datei wird die entsprechende Funktion aufgerufen und zurück an den default-Task gegeben.

Zunächst wechselt man in das Projektverzeichnis. Wenn Gulp global installiert wurde, reicht das Kommando gulp aus um die Datei gulpfile.js zu starten.

root@srv03:~ # gulp

Die Datei gulpfile.js
// 'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');


// scss kompilieren und in css-datei speichern
// ------------------------------------------------

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


// css minifizieren, umbenennen und speichern
// ------------------------------------------------

gulp.task('minify-css', () => {
     return gulp.src('css/*.css')
    .pipe(cleanCSS())
    .pipe(rename('main.min.css'))
    .pipe(gulp.dest('dist'));
});


// gulp default-task und verzeichnisse beobachten
// ------------------------------------------------

gulp.task('default', function() {
        gulp.watch('sass/*.scss', gulp.series('sass'));
        gulp.watch('css/*.css', gulp.series('minify-css'));
});

 

Weitere Infos:

Wer Node.js nicht über einen Paketmanager installiert und/oder unter Windows nutzen will kann sich die aktuelle LTS Version auf nodejs.org herunterladen:

Nützliche Quellen im Netz: