browser-sync css injection not working for cache-busted css files

Question

I am using gulp-rev to cache-bust my compiled scss files. This means the css injections works only when I don't change anything in my css file. If I change anything, gulp-rev will give the file a different name and browserSync won't know to inject it. Here is the scss task in my gulpfile:

Object.keys(styles).forEach(function(key){
    gulp.task('css-' + key, function(){
        del.sync([
            './public/' + styles[key].dir +  manifest[key + '.css'],
            './public/' + styles[key].dir + '/maps/' + manifest[key + '.css'] + '.map'
        ]);
        return gulp.src('./source/' + styles[key].dir + key + '.scss')
            .pipe(plumber())
            .pipe(sourcemaps.init())
            .pipe(sass())
            .pipe(minifycss())
            .pipe(autoprefixer())
            .pipe(rev())
            .pipe(sourcemaps.write('maps/'))
            .pipe(tap(updateManifest))
            .pipe(gulp.dest('public/' + styles[key].dir))
            .pipe(gulpif(
                function(file){return path.extname(file.path) === '.css'},
                browsersync.stream()
            ));
    });
});

Answer 1

I believe in general you shouldn't be doing revisions during the development process. If you're worried about cache busting usually it shouldn't be a problem and you can always hard reload. However, you can also configure your local dev server to set the max-age to 0 or set the header Cache-Control: no-cache.

You should have a separate gulp task for your distribution (or apply rev only when building a dist version).