How to deal with browser cache while using browserSync?
why don't you use gulp-cache
var cache = require('gulp-cache');
gulp.task('clearCache', function() {
// Still pass the files to clear cache for
gulp.src('./lib/*.js')
.pipe(cache.clear());
// Or, just call this for everything
cache.clearAll();
});
and then add this task to your watcher
In chrome devtools (CTRL MAJ I), in Network tab, you have a Disable cache checkbox. It should work.
Found a solution through using {stream: true}
parameter of browserSync.reload
function, but to make it work, some changes required. So how it was:
gulp.watch('/public/js/**/*.js').on('change', browserSync.reload);
and how it looks now:
gulp.watch('/public/js/**/*.js').on('change', function(e) {
return gulp.src(e.path)
.pipe(browserSync.reload({stream: true}));
});
This solved my problem:
1- Install gulp-cache npm package
npm i gulp-cache
2-Require this package in your gulpfile.js by adding the following line:
const cache = require('gulp-cache');
3- Now you want to create a gulp task that clear the cache using gulp-cache:
function clearCache(done) {
return cache.clearAll(done);
}
4- Finally update your watch task, I'll share mine as a reference:
function watch() {
browserSync.init({
server: './dist',
});
gulp.watch('sass/**/*.scss', gulp.parallel(styles));
gulp.watch('sass/**/*.scss').on('change', clearCache, browserSync.reload);
gulp.watch('index.html', gulp.parallel(copyHtml));
gulp.watch('*.html').on('change', browserSync.reload);
gulp.watch('js/**/*.js', gulp.series(lint, scripts));
gulp.watch('js/**/*.js').on('change', clearCache, browserSync.reload);
gulp.watch('img/**/*.jpg', gulp.series(copyImages));
gulp.watch('img/**/*').on('change', clearCache, browserSync.reload);
}
If you look closely you'll notice I change each of my gulp.watch by adding clear cache to the list of function to run after change:
gulp.watch('sass/**/*.scss', gulp.parallel(styles));
gulp.watch('sass/**/*.scss').on('change', clearCache, browserSync.reload);
Please let me know if this works for you!