I'm using gulp with browserSync with next config(simplified):
gulp.task('serve', ['compile_styles'], function() {
browserSync.init({
proxy: 'my-local-dev.site'
});
gulp.watch('/public/styles/**/*.scss', ['compile_styles']);
gulp.watch('/public/js/**/*.js').on('change', browserSync.reload);
gulp.watch('/**/*.php').on('change', browserSync.reload);
});
SCSS changes being pushed through .pipe(browserSync.reload({stream: true}))
inside compile_styles
task, but as you can see for .js
files I used simple browserSync.reload
and it is not working because browser(chrome 57.0.2987.133 (64-bit)) loads static files from it's internal cache so I need to make additional reload to flush that cache and force browser to load that files again.
The same thing can be related to any static resources such as images, fonts and etc. So how to deal with browser cache while using browserSync?
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}));
});
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With