Gulp mit libsass und Foundation

Ok, Gulp oder auch Grunt machen wirklich Freude, sobald es aber an größere SASS-Bibliotheken wie etwa im Fall von Foundation geht, wird es nervig: Da freut man sich über Browsersync und all die Magie, muss dann aber feststellen, dass man sich vor jedem Reload eine neue Tasse Tee holen kann. libsass behebt aber auch das.

Auf meinen MacBook Air kommen schon mal 7 Sekunden für das Kompilieren zu Stande. Von „live reload“ kann da eigentlich nicht mehr die Rede sein. Das auf C/C++ basierende libsass stellt den herkömmlichen in Ruby geschrieben SASS Compiler aber weit in den Schatten. Aus Sekunden werden Millisekunden und die Warterei hat ein Ende.

Ben Frain hat schon vor längerer Zeit die Lösung für Grunt, aber auch die damit verbunden Probleme geschildert.

Von den Problemen selbst nicht betroffen, war ich nur heiß darauf das Ganze auch unter Gulp zum Laufen zu bringen. Also, node Package gulp-sass installiert und mit save-dev die Abhängigkeit gleich auch in die package.json geschrieben:

npm install gulp-sass --save-dev

Eine für mich optimale Lösung, über die Dokumentation des Pakets hinweg, da sie gleich auch Foundation mit einbindet, war das foundation-libsass-gulp-template auf Github. Auf den elementaren Teil in der gulpfile.js heruntergebrochen:

gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe($.sass({includePaths: ['bower_components/foundation/scss']}))
        .pipe(gulp.dest('./css'))
        .pipe($.connect.reload());
});

Der Gewinn an Speed ist wirklich berauschend und der Aufwand minimal. Jetzt kann ich mich wieder ganz der Freude an dem neuen Build-System hingeben.