gulp Livereload verwendet veraltete CSS-Datei

Question

Ich benutze die folgende Schluck Setup, um meine Sass-Dokumente zu einem minimierten CSS-Dokument zu kompilieren, meine js zu minimieren und den Browser zu laden, wenn ich ein Dokument in meiner IDE (Atom) speichern.

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']); 

Wenn ich eine meiner Sass-Dateien bearbeite, aktualisiert mein Chrome-Browser automatisch meine localhost (MAMP) -Seite. Wenn ich jedoch beispielsweise meine Seite index.html in der IDE speichere oder die Seite im Browser aktualisiere, verwendet Chrome eine alte Version meiner kompilierten CSS-Datei und zeigt die aktuellen Änderungen nicht an.

Warum ist das? Und wie repariere ich das?

Answer 1

Wenn das Problem hier ist eigentlich das gleiche wie ich, also eine Race-Bedingung, wird folgendes helfen:

... 
/* ===== 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() 
    }); 
}); 
... 

Oder wenn Sie Gulp verwenden 4 vielleicht könnten Sie Ihre ‚watch'-Aufgabe ändern wie so (nicht getestet!):

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

oder

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

... 

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