CODEWITHSUNDEEP
sassgulpwatchlivereload
Boyswan
Boyswan

Reputation: 224

Gulp livereload issue (save twice)

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();
});

Upvotes: 0

Views: 2181

Answers (1)

Rob Knight
Rob Knight

Reputation: 83

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:

  1. Add .pipe(livereload()) as the last step in your sass task
  2. 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.

Upvotes: 3

Related Questions