Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to deal with browser cache while using browserSync?

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?

like image 740
Roman Nazarkin Avatar asked Apr 13 '17 14:04

Roman Nazarkin


2 Answers

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}));
});
like image 101
Roman Nazarkin Avatar answered Sep 27 '22 23:09

Roman Nazarkin


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

like image 45
abdelhak.ajbouni Avatar answered Sep 27 '22 23:09

abdelhak.ajbouni