我正在使用以下 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 浏览器会自动刷新我的 localhost (MAMP) 页面。但是,例如,当我在 IDE 中保存我的 index.html 页面或在浏览器中刷新页面时,Chrome 使用的是我编译的 css 文件的旧版本,并且不显示当前的更改。
这是为什么?我该如何解决这个问题?