Question

在指向代理URL时，我无法理解Browsersync serveStatic。从我的阅读中看来，我应该能够将CSS注入代理网站。在实践中，虽然我似乎无法让它工作。我使用rewriteRules用我的本地CSS替换代理URL上的现有CSS文件，但如果不替换文件，我似乎无法注入纯CSS。要指定，我的CSS根本就没有被加载。如果我查看网络流量，我看不到我的样式表被加载。我误解了serveStatic还是我的配置不正确？以下是我的Gulp文件的简化摘录。

供参考我正在使用Browsersync V2.8.3。

gulp.task('build-css', () => {
    return gulp.src('src/scss/**/*.scss')
        .pipe(gulpif(arg.sourcemap, sourcemaps.init()))
        .pipe(sassLint())
        .pipe(concat('styles.scss'))
        .pipe(sassLint.format())
        .pipe(sassLint.failOnError())
        .pipe(sass())
        .pipe(autoprefixer('last 10 versions'))
        .pipe(cssnano())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('web/css'))
        .pipe(browserSync.stream({ match: '**/*.css' }));
});

gulp.task('serve', () => {
    browserSync.init({
        proxy: 'www.sampleurl.com',
        serveStatic: ['web/css'],
        reloadDelay: 50,
        reloadDebounce: 250
    });
    gulp.watch('src/scss/**/*.scss', ['build-css']);
});

Answer 1

出于某种原因，我完全错过了Browsersync recipes section。在那里我找到了解决方案。在那里，我找到了一个名为Proxy example + injecting custom css file的特定食谱。从本质上讲，它似乎没有办法只包含一个文件列表，只是在页面加载时弹出它们。相反，它需要使用snippetOptions并匹配head标签之类的东西。然后，您只需将链接标记附加到匹配的头部内容即可。以下代码是从食谱中复制的。

var browserSync = require('browser-sync').create();

browserSync.init({
    proxy: "example.com",
    serveStatic: ["app/static"],
    files: "app/static/_custom.css",
    snippetOptions: {
        rule: {
            match: /<\/head>/i,
            fn: function (snippet, match) {
                return '<link rel="stylesheet" type="text/css" href="/_custom.css"/>' + snippet + match;
            }
        }
    }
});

Browsersync代理站点注入CSS

1 个答案: