Fun With Gulp – a little bit more…

So, yesterday I posted about using Gulp to help compile SASS into CSS, including minifying it. All good stuff, but after I published the article I ran into a couple of problems with my method. There were two things happening – sometimes the Gulp task to convert the SASS would fire before Visual Studio had finished saving the file, resulting in a “file unavailable” error. I fixed this by adding a delay to the task but that introduced another issue. See, Gulp runs tasks concurrently so I had to make sure that it was, in fact, running the tasks one after the other. To do both of these things I had to add a couple more plugins, so let’s update our steps from yesterday:

Step 7: Delay that conversion!

First off, to get round the potential delay in saving the file, we need to add a wait in to the sass task. Install it into your project:

npm install gulp-wait --save-dev

Note that we’re putting npm in front of the install command now. This is because we’ve come back to our project after closing it all down, so we haven’t run npm init to load npm into our project. I’m not sure if it would hurt to do this again but I’m fine with just adding npm to the start of my commands. It’s fine.

Anyway! With that installed, add it to your gulpfile as a var and use it in your sass task:

var wait = require('gulp-wait');

gulp.task('sass', function(){
    return gulp.src('sass/style.scss')
        .pipe(wait(1500))
        .pipe(sass())
        .pipe(gulp.dest('css'))
});

That will now make the sass task pause before firing, giving the style.scss file a chance to save.

Step 8: Make the tasks run sequentially

For this we again need a new plugin, run-sequence. You know the drill, install it into your project:

npm install run-sequence --save-dev

Now, to use this I created a new task which would do the run sequence and updated my watch function to run only this, instead of my two other tasks:

gulp.task('docss', function(){
    runSequence('sass','minicss');
});

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

And that all works! This is what my gulpfile now looks like:

var gulp = require('gulp');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');
var wait = require('gulp-wait');
var runSequence = require('run-sequence');

gulp.task('sass', function(){
    return gulp.src('sass/style.scss')
        .pipe(wait(1500))
        .pipe(sass())
        .pipe(gulp.dest('css'))
});

gulp.task('minicss', function(){
    return gulp.src('css/style.css')
        .pipe(cssnano())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('css'))
});

gulp.task('docss', function(){
    runSequence('sass','minicss');
});

gulp.task('watch', function(){
    gulp.watch('sass/**/*.scss', ['docss']);
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s