gulp - 浏览器同步 css 注入不适用于缓存破坏的 css 文件

Question

我正在使用 gulp-rev 缓存我编译的 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

我相信一般来说你不应该在开发过程中进行修改。如果您担心缓存破坏，通常这应该不是问题，您可以随时重新加载。但是，您也可以将本地开发服务器配置为将 max-age 设置为 0 或设置 header Cache-Control: no-cache。

您应该为您的发行版设置一个单独的 gulp 任务（或仅在构建 dist 版本时应用 rev）。