Sass GulpLivereload使用过时的css文件

我使用下面的gulp设置将我的sass文档编译成一个缩小的css文档，缩小我的js，并在IDE（Atom）中保存任何文档时加载浏览器

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

---

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

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

...
/* ===== 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，那么您可以更改您的“监视”任务，就像这样（未经测试！）：

或

---

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

...
/* ===== 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，那么您可以更改您的“监视”任务，就像这样（未经测试！）：

或

---

是否已禁用浏览器上的缓存？（清除缓存可能会有帮助）作为监视任务的一部分，您是否可以尝试清理旧的css文件，然后会发生什么？这里可能发生的情况是

gulp.dest

实际上在发出

livereload（）

时尚未完成文件的复制。我目前正致力于解决这个问题。对于这个简单的例子，可以使用

gulpwait

插件等待

gulp.dest

在重新加载之前完成。当然，这不是确切的方法。我仍在寻找合适的解决方案。您是否已禁用浏览器上的缓存？（清除缓存可能会有帮助）作为监视任务的一部分，您是否可以尝试清理旧的css文件，然后会发生什么？这里可能发生的情况是

gulp.dest

实际上在发出

livereload（）

时尚未完成文件的复制。我目前正致力于解决这个问题。对于这个简单的例子，可以使用

gulpwait

插件等待

gulp.dest

在重新加载之前完成。当然，这不是确切的方法。我还在研究一个合适的解决方案。

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