0

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.

Fisu
  • 3,294
  • 9
  • 39
  • 61
  • Have you tried re-doing the sass task without the `watch` and tried to run `gulp styles` with and without livereload ? First check if this works fine. – soenguy Jun 06 '14 at 08:25
  • `watch` is working fine as the correct CSS is getting output. Running `gulp-styles` produces the correct CSS again but the browser is not refreshing (but it won't do, as the `serve` task (not shown) isn't started). – Fisu Jun 06 '14 at 08:54
  • 1
    I can't see why you get the issue. One thing I would try, even if it's not perfect but may work is watching on the css files and build a specific task ONLY for reloading. When you compile sass files, the css is changed, and then you could fire the `livereload`. Until someone else has a better (and working solution), this might do the work. That's first trick that comes to my mind but you could look around for others to make this working (like calling back the `scripts` task with `gulp.start`at the end of the styles task for example). – soenguy Jun 06 '14 at 09:32
  • Your workaround works for now.. very bizarre issue! Thanks for your help. – Fisu Jun 06 '14 at 09:47
  • Please answer your own question with the working workaround so that other people getting the same issue can fix it easily. Of course, it's only a temporary solution until anyone else really know how to fix it. Thanks, and you're welcome. – soenguy Jun 06 '14 at 09:49

1 Answers1

1

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.

Fisu
  • 3,294
  • 9
  • 39
  • 61