Инъекция css с синхронизацией браузера не работает для css-файлов с кеш-памятью

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

person Marcel    schedule 15.08.2015    source источник


Ответы (1)


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

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

person mkhatib    schedule 15.03.2016
comment
Я решил это некоторое время назад, имея задачу css-* без очистки кеша для разработки и задачу build-css-* с очисткой кеша для производства. Первый вводится с синхронизацией браузера. - person Marcel; 16.03.2016