Lately I see a lot of comments on twitter about gulp.js, as they say gulp is something like if Grunt had put on a diet.

Both, gulp.js and Grunt, are a kind of task runners, we can setup them to do a lot of tasks, like minify javascript, compile Sass, concat, lint… all of this thanks to the lot of plugins available for both systems.

gulp.js

Although I knew about Grunt a long time ago, I never used it, it has been now with the new gulp.js when I’ve taken time to test it, starting with Sass compiling. Before gulp.js I was using Compass at command line or Codekit for this task.

Testing gulp.js

For the first test I’ve setup Gulp to compile every Sass file into the folder where I have all our Prestashop Themes. I also use “gulp.watch“, so Gulp will remain active waiting for any file modification.

Themes’ folders are specified in the “themesFolders” array, where “compass” task will walk to check every Sass file.

This is my working “gulpfile.js“:

var gulp      = require('gulp'),
    compass   = require('gulp-compass');

var themesFolders = [
    'themes/theme1/',
    'themes/theme2/',
    'themes/theme3/',
    'themes/theme4/',
    'themes/theme5/',
    'themes/theme6/'
    ];

gulp.task('compass', function(){
    themesFolders.forEach(function(folder) {
        gulp.src(folder + 'css/scss/*.scss')
            .pipe(compass({
                style: 'compressed',
                sass: folder + 'css/scss',
                css: folder + 'css'
            }))
            .pipe(gulp.dest(folder + 'css'));
    });
});

gulp.task('watch', function () {
    gulp.watch('themes/**/*.scss', ['compass']);
});

gulp.task('default', ['compass', 'watch']);