Inmadusa.com [Part 6]: Bundle CSS files with a gulp task

On my previous post I mentioned the use of BlazeCSS. As a means of organization I decided to have a separate CSS file for each section of the site and use gulp to merge them all into a single file to be served at runtime.

Given a folder structure like this:

The gulp task will look like this:

gulp.task('css', function() {
    return gulp.src('css/*.css')
    .pipe(concat('index.css'))
    .pipe(gulp.dest('./'));
});

Take all the .css files on the css folder, concatenate them into a file named 'index.css' and drop it on the root of the site. Just like I did with the handlebars task, I hooked this up with the watch task so that the merged file is regenerated whenever a css file is changed:

gulp.task('watch', function() {
    gulp.watch('templates/*.hbs', ['templates']);
    gulp.watch('css/*.css', ['css']);
});

Next up, use browser-sync to enable auto-reloading the browser when a change is made. In the meantime, you can visit the live site or check the source code.