CODEWITHSUNDEEP
gulplivereload
Fisu
Fisu

Reputation: 3324

GulpJS: Livereload not refreshing for Sass changes (works for JS changes)

My gulpfile watches for changes to Sass files then should fire a refresh for the lr server. The watch event is working fine as the Sass is being compiled on each change, however the browser is not refreshing. I am using gulp-ruby-sass to compile the Sass.

I have an almost identical task that watches JS files then fires a browser refresh, this works fine.

Below is the (abridged) gulpfile.js. I have included the task scripts as this currently works the same way as styles task should do.

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var bourbon = require('node-bourbon').includePaths;
var newer = require('gulp-newer');
var lr = require('tiny-lr');
var lrserver = lr();
var refresh = require('gulp-livereload');

gulp.task('scripts', ['vendorScripts', 'libScripts'], function () {
    return gulp.src([paths.js])
        .pipe(newer(paths.destJS + '/script.js'))
        .pipe(concat('script.js'))
        .pipe(gulp.dest(paths.destJS))
        .pipe(refresh(lrserver));
});

gulp.task('styles', function () {
    return gulp.src(paths.sass)
        .pipe(newer(paths.destCSS))
        .pipe(sass({loadPath: require('node-bourbon').includePaths}))
        .pipe(gulp.dest(paths.destCSS))
        .pipe(refresh(lrserver));
});

gulp.task('watch', function () {
    gulp.watch(paths.jsAll, ['scripts']);
    gulp.watch(paths.sass, ['styles']);
    gulp.watch(paths.html, ['html']);
    gulp.watch([paths.img, '!' + paths.app + '/**/images/sprites{,/**}'], ['images']);
    gulp.watch(paths.sprites, ['sprites']);
});

I have tried removing both the newer plugin and the node-bourbon require but it has no effect on this issue.

Upvotes: 0

Views: 666

Answers (1)

Fisu
Fisu

Reputation: 3324

As a workaround, in response to soenguy's comments:

Create a new task which itself first calls the styles task:

gulp.task('goRefresh', ['styles'], function () {
    return gulp.src([paths.app], { read: false })
        .pipe(refresh(lrserver));
});

Then for the watch task change the Sass watch to:

gulp.watch(paths.sass, ['goRefresh']);

This is far from an ideal solution, but at least browser refreshing works.

Upvotes: 1

Related Questions