gulp livereloadは古くなったCSSファイル

Question

を使用しています。次のgulp設定を使用して、jasを小さくし、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ファイルの1つを編集すると、Chromeブラウザは自動的にローカルホスト（MAMP）ページを更新します。しかし、たとえばIDEのindex.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() 
    }); 
}); 
... 

それとも、がぶ飲み4を使用している場合は、多分あなたのようなあなたの「watch'タスクを変更する可能性をそう（テストしていない！）：

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