How to deal with browser cache while using browserSync?

Question

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?

Answer 1

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

Answer 2

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