Gulp, Grunt-Alternative mit Streams

Gulp ist ein JavaScript Build Tool und Task Runner, ähnlich wie Grunt über das ich hier schon berichtete.

Gulp arbeitet mit streams, Datenströmen, die zu deutlich schnelleren Build Zeiten führen können. Darüber hinaus können die Konfigurationsdateien deutlich übersichtlicher ausfallen.

Gulp LESS CSS kompilieren

Um LESS CSS Dateien mit Gulp zu kompilieren und deren Änderungen zu überwachen kommt man mit wenigen Zeilen Code aus:

<code>var less = require('gulp-less');
var watch = require('gulp-watch');

gulp.task('default', function() {
    return gulp.src('./less/*.less')
        .pipe(watch())
        .pipe(less())
        .pipe(gulp.dest('./css/'));
});
</code>

Dieses Script sorgt dafür, dass wenn immer eine LESS Datei im Verzeichnis ./less geändert wird, diese in eine CSS Datei im Verzeichnis ./css kompiliert wird.

Mit dem Kommando gulp startet man es und es wird im Terminal protokollieren wenn sich etwas ändert.

Hier das Beispiel auf GitHub: gulp-less-watch.

Gulp vs Grunt

Da sich Gulp in einem relativ frühen Stadium befindet, lassen sich die Beiden derzeit schlecht vergleichen, besonders da es um Grunt herum schon eine große Community gibt und es auch innerhalb des Yeoman Projekts zum Einsatz kommt.

Die Liste an Gulp Plugins ist derzeit noch kurz und hat under 200 Einträgen und bietet beit weitem nicht den Funktionsumfang der für Grunt verfügbaren, allerdings ist die Basis für viele Entwickler sicher schon interessant.

Plugins für concat, less, sass, uglify und imagemin sind schon auf der Liste und decken meinen Bedarf derzeit relativ gut.

Fazit

Gulp sieht nach einer spannenden und schnellen Alternative zu Grunt aus und da mein Laptop für unterwegs nicht die größte Rechenleistung hat, musste ich es einfach mal ausprobieren.