sass - gulp livereload は古い css ファイルを使用します

Question

次の gulp セットアップを使用して、sass ドキュメントを 1 つの縮小された 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 ファイルの 1 つを編集すると、Chrome ブラウザーがローカルホスト (MAMP) ページを自動的に更新します。しかし、たとえば index.html ページを IDE に保存したり、ブラウザーでページを更新したりすると、Chrome はコンパイル済みの css ファイルの古いバージョンを使用し、現在の変更を表示しません。

何故ですか？そして、どうすればこれを修正できますか？