浏览器同步css注入不适用于缓存崩溃的css文件

Question

我正在使用gulp-rev缓存-bust我编译的scss文件。这意味着只有当我不更改css文件中的任何内容时，css注入才会起作用。如果我改变了什么，gulp rev会给文件起一个不同的名字，browserSync不会知道要注入它。下面是我的gulpfile中的scss任务：

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

我认为一般来说，你不应该在开发过程中进行修改。如果你担心缓存崩溃，通常这应该不是问题，你总是可以硬重新加载。但是，您也可以将本地开发服务器配置为将最大年龄设置为0或设置头Cache-Control: no-cache。

对于您的发行版，您应该有一个单独的gulp任务(或者仅在构建dist版本时应用rev )。