17.12.2020 | Linux, Webentwicklung
NodeJS – Gulp Minify und Concat CSS

Gerade sehe ich mir meinen OnePager an und stelle fest, dass dort doch eine Menge CSS enthalten ist. Neben dem Bootstrap Framework, FontAwesome und einigen Mixins sammelt sich so einiges an. Zu diesem Zweck kann man an dieser Stelle GULP bemühen, die gewünschten Dateien zunächst zu minifizieren um sie dann im Anschluss  zusammengefasst als eine Datei auszugeben.

Benötigte werden die Module gulp, gulp-uglifycss, gulp-rename und gulp-concat. Sind alle Module installiert fehlt nur noch die gulpfile.js mit den Tasks zum abarbeiten der einzelnen Schritte.

Die „gulpfile.js“

Zunächst wird die Datei mixins.css überwacht. Erfolgt eine Änderung wird der Task minify-css ausgeführt. Er minifiziert die CSS Datei. Direkt im Anschluss wird der Task concat-css ausgeführt. Dieser Task wiederum sammelt alles ein und verpackt es in der Datei dist.min.css im Verzeichnis build. Die Verzeichnisse können natürlich frei gewählt werden.

// 'use strict';
var gulp        = require('gulp');
var uglifycss   = require('gulp-uglifycss');
var rename      = require('gulp-rename');
var concatCss   = require('gulp-concat');

gulp.task('minify-css', function () {
    return gulp.src('mixins.css')
        .pipe(uglifycss({
            // "maxLineLen": 200,
            "uglyComments": true
        }))
        .pipe(rename('mixins.min.css'))
        .pipe(gulp.dest('build'));
});

gulp.task('concat-css', function () {
    // Dateien innerhalb eines Verzeichnisses
    // return gulp.src('assets/**/*.css') oder
    // Einzelne Dateien aus mehreren Verzeichnissen
    return gulp.src(['bootstrap-4.5.3-dist/css/bootstrap.min.css', 'fontawesome-free-5.15.1-web/css/all.min.css', 'build/mixins.min.css'])
        .pipe(concatCss("dist.min.css"))
        .pipe(gulp.dest('build'));
});

gulp.task('default', function() {
    gulp.watch('mixins.css', gulp.series('minify-css','concat-css'));
});

Die Ausgabe auf der Konsole, während der Ausführung der gulpfile.js sieht dann in etwa wie nachfolgend aus:

root@hades: /srv/www/www.deineDomain.de/resources # ./gulp.js 

[19:41:05] Using gulpfile /srv/www/www.deineDomain.de/resources/gulpfile.js
[19:41:05] Starting 'default'...
[19:41:08] Starting 'minify-css'...
[19:41:08] Finished 'minify-css' after 122 ms
[19:41:08] Starting 'concat-css'...
[19:41:08] Finished 'concat-css' after 32 ms
[19:42:51] Starting 'minify-css'...
[19:42:51] Finished 'minify-css' after 44 ms
[19:42:51] Starting 'concat-css'...
[19:42:51] Finished 'concat-css' after 25 ms

Weitere Informationen (Installation, Vorraussetzungen, usw.) und eine komplette Einleitung zum Thema Gulp findest du hier:

geschrieben von Jens (keine Kommentare), , , , , ,

Du kannst diese Seite via PayPal unterstützen: paypal.me/jensbh

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Mit und gemacht in Kassel / Nordhessen. 2022