Gulp livereload issue (save twice)

Question

I've recently switched from grunt to gulp, and so far have successfully configured gulp to do what I want. The only problem I'm having is with livereload, I'm finding that I have to save twice in order to see the compiled sass in the browser. Sass seems delayed

Is there a way I can ensure that livereload doesn't execute until sass is compiled? Here's my config:

// Dependencies
var gulp        = require('gulp');
var watch       = require('watch');
var livereload  = require('gulp-livereload');
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer'); 
var cssmin      = require('gulp-cssmin');
var rename      = require('gulp-rename');
var uglify      = require('gulp-uglify');
var concat      = require('gulp-concat');
var plumber     = require('gulp-plumber');
var notify      = require('gulp-notify');

onError = function(error){  
    notify.onError({
        title:    "Gulp",
        subtitle: "Failure!",
        message:  "<%= error.message %>",
        sound:    "Beep"
    })(error);

    this.emit('end');
};

// Watch
gulp.task('watch', function(){
    gulp.watch('src/css/**/*.scss', ['sass']).on('change', livereload.changed);
    gulp.watch('src/js/**/*.js', ['concat']).on('change', livereload.changed);
    gulp.watch('*').on('change', livereload.changed);
});

// Sass
gulp.task('sass', function(){
    gulp.src('src/css/style.scss')
        .pipe(plumber({errorHandler: onError}))
        .pipe(sass({style: 'expanded'}))
        .pipe(prefix('last 4 versions', 'ie 8', 'ie 9'))
        .pipe(gulp.dest('src/css/build'))
        .pipe(cssmin())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest('dist/css'))
});

// Concat
gulp.task('concat', function(){
    gulp.src(['src/js/models/*.js', 'src/js/views/*.js', 'src/js/controllers/*.js'])
        .pipe(plumber({errorHandler: onError}))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('src/js/build'))
        .pipe(uglify())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest('dist/js'))
})

// Default
gulp.task('default', ['watch'], function(){
        livereload.listen();
});

Not directly an answer but remember to return stream from your `sass` & `concat` tasks -> `return gulp.src(..` — Heikki, Nov 13 '14 at 21:32
https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support — Heikki, Nov 13 '14 at 21:34

Rob Knight · Accepted Answer · 2014-11-13T23:23:00.430

Your current watch task is telling gulp to run livereload as soon as one of your sass files changes, instead of waiting for the sass task to complete.

According to the gulp-livereload documentation:

Add .pipe(livereload()) as the last step in your sass task
Remove the livereload.change step from your sass file watch task.

That will ensure the livereload step will always happen last in your sass task, after your css has been compiled.

Gulp livereload issue (save twice)

1 Answers1