browser-sync css injection не работает для кэшированных файлов css

Question

Я использую gulp-rev для кэширования моих скомпилированных файлов scss. Это означает, что инъекции css работают только тогда, когда я ничего не меняю в своем файле css. Если я что-то изменил, gulp-rev придаст файлу другое имя, и browserSync не будет знать, чтобы его ввести. Вот задача в СКС моей 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

Я считаю, в общем, вы не должны делать изменения, в процессе разработки. Если вы беспокоитесь о переполнении кеша, то это не должно быть проблемой, и вы всегда можете перезагрузить. Тем не менее, вы также можете настроить локальный dev-сервер для установки максимального возраста на 0 или установить заголовок Cache-Control: no-cache.

У вас должна быть отдельная задача gulp для вашего распространения (или применить rev только при построении версии dist).