CODEWITHSUNDEEP
sassgulplivereloadgulp-livereload
iamrobin.
iamrobin.

Reputation: 1634

gulp livereload uses outdated css file

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?

Upvotes: 0

Views: 382

Answers (1)

Fencer
Fencer

Reputation: 1088

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'));
    ...
});

Upvotes: 2

Related Questions