How to deal with browser cache while using browserSync?

11
votes

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?

4
gulpbrowser-cachebrowser-sync
Why don't you add {stream: true} to your js watcher browserSync.reload call? I do not have to do an additional reload beyond that called in gulp. Your image files should be able to be reinjected into the page without a reload/refresh at all. – Mark
@Mark hmmm... thanks for the idea, I have rewritten my config a little bit and it seems to be work properly right now. I'll post the answer shortly. – Roman Nazarkin

4 Answers

7
votes

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

5
votes

In chrome devtools (CTRL MAJ I), in Network tab, you have a Disable cache checkbox. It should work.

2
votes

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}));
});
1
votes

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!