gulp livereload使用過時的css文件

我使用下面的gulp安裝程序將我的sass文檔編譯爲一個縮小的css文檔，以便在我的IDE（Atom）中保存任何文檔時縮小我的js並重新生成瀏覽器。gulp livereload使用過時的css文件

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瀏覽器會自動刷新我的本地主機（毫安）頁面。但是，當我保存在IDE中的index.html頁面或刷新瀏覽器中的頁面時，Chrome會使用舊版本的編譯後的css文件，而不會顯示當前的更改。

這是爲什麼？我該如何解決這個問題？

來源

2017-04-12 iamrobin.

對您的瀏覽器禁用了緩存？（清除緩存可能會有所幫助） –

你可以嘗試清潔舊的css文件作爲watch任務的一部分，那麼會發生什麼？ – harishr

在這裏可能會發生的情況是'gulp.dest'實際上還沒有在'livereload（）'發出時複製文件。我目前正在研究這個問題。對於這種簡單的情況，它可能是一個解決方案，使用'gulp-wait'插件等待'gulp.dest'在重新加載之前完成。當然，這並不是確切的方法。我仍在努力尋找合適的解決方案。 – Fencer

如果這裏的問題實際上是我的一樣，即競爭條件，下面會有所幫助：

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

來源

2017-11-29 16:10:45 Fencer

gulp livereload使用過時的css文件

回答

相關問題