gulp livereload uses outdated css file

Question

I'm using the following gulp setup to compile my sass documents to one minified css document, to minify my js and to livereload the browser when I save any document in my IDE (Atom).

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-ruby-sass');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var prefix = require('gulp-autoprefixer');


/* ===== HTML TASKS ===== */
gulp.task('html', function(){
   gulp.src('index.html')
   .pipe(livereload());
});


/* ===== SCRIPT TASKS ===== */
//Uglifies
gulp.task('scripts', function(){
   gulp.src('js/*.js')
   .pipe(plumber())
   .pipe(uglify())
   .pipe(gulp.dest('js/minjs'));
});

/* ===== STYLE TASKS ===== */
//compiling and compressing scss files
gulp.task('styles', function () {
  return sass('scss/**/*.scss', { style: 'compressed' })
    .on('error', sass.logError)
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});


/* ===== WATCH ===== */
//watches JS and SCSS
gulp.task('watch', function(){

   livereload.listen();

   gulp.watch('index.html', ['html']);
   gulp.watch('js/*.js', ['scripts']);
   gulp.watch('scss/*', ['styles']);
});

/* ===== DEFAULT ===== */
gulp.task('default', ['scripts', 'styles', 'watch']);

When I edit one of my sass files, my Chrome browser automatically refreshes my localhost (MAMP) page. But when I save, for example, my index.html page in the IDE or refresh the page in the browser, Chrome uses an old version of my compiled css file and does not shows the current changes.

Why is that? And how do I fix this?

Have you disabled cache on your browser? (Clearing cache may help) — Denis Tsoi, Apr 13 '17 at 01:56
can you try cleaning older css files as part of watch task, what happens then?? — harishr, Apr 13 '17 at 08:08
What might happen here ist that `gulp.dest` actually has not yet finished copying the files when `livereload()` is issued. I'm currently working on exactly that problem. For this simple case it might be a solution to use the `gulp-wait` plugin to wait for `gulp.dest` to finish before reloading. Of course that is no exact way to do it. I'm still working on a proper solution. — Fencer, Nov 29 '17 at 14:04

score 2 · Answer 1 · answered Nov 29 '17 at 16:10

If the problem here is actually the same as mine, i.e. a race condition, the following will help:

...
/* ===== STYLE TASKS ===== */
//compiling and compressing scss files
gulp.task('styles', function () {
  return sass('scss/**/*.scss', { style: 'compressed' })
    .on('error', sass.logError)
    .pipe(gulp.dest('css'))
    .on('end', function() {
        livereload.reload()
    });
});
...

Or if you are using Gulp 4 maybe you could alter your 'watch'-task like so (not tested!):

...
gulp.watch('index.html', gulp.series('html', function(){
    liverelaod.reload();
}));
...

or

gulp.task('reload', function() {
    livereload.reload();
});

...

gulp.task('watch', function() {
    livereload.listen();
    ...
    gulp.watch('index.html', gulp.series('html', 'reload'));
    ...
});

gulp livereload uses outdated css file

1 Answers1