How to work with browser cache when using browserSync?

Question

I am using gulp with browserSync with the following configuration (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 are pushed through the .pipe(browserSync.reload({stream: true}))inside of the task compile_styles, but, as you can see in the files .js, I used simple browserSync.reloadand does not work, because the browser (chrome 57.0.2987.133 (64-bit)) loads static files from the internal cache, so I need to do an additional reboot to clear this cache and force the browser to download these files again.

The same can be associated with any static resources, such as images, fonts, etc. So how to work with browser cache when using browserSync?

Answer 1

{stream: true} browserSync.reload, , . , :

gulp.watch('/public/js/**/*.js').on('change', browserSync.reload);

:

gulp.watch('/public/js/**/*.js').on('change', function(e) {
    return gulp.src(e.path)
        .pipe(browserSync.reload({stream: true}));
});

Answer 2

chrome devtools (CTRL MAJ I) "" " ". .

Answer 3

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 the observer