Gulp livereload使用过时的CSS文件

Question

我正在使用以下gulp设置将我的sass文档编译为一个缩小的css文档，缩小我的js并在将任何文档保存在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']);

当我编辑我的一个 sass 文件时，我的 Chrome 浏览器会自动刷新我的本地主机 (MAMP( 页面。但是，例如，当我在 IDE 中保存我的索引.html页面或在浏览器中刷新页面时，Chrome 使用我编译的 css 文件的旧版本，并且不显示当前更改。

为什么？我该如何解决这个问题？

Answer 1

如果这里的问题实际上与我的问题相同，即竞争条件，以下内容将有所帮助：

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

或者，如果您使用的是 Gulp 4，也许您可以像这样更改您的"手表"任务(未经测试！

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

或

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