css - BrowserSync 通过代理将 css 注入到实时 Wordpress 页面中

Question

我正在尝试使用 BrowserSync 和 sass 从 Wordpress 站点编辑 style.css。我想将更改注入页面并自动重新加载。

到目前为止，我尝试了很多 gulpfile.js 代码的变体，但没有成功——scss 文件编译为 style.css（ok），但页面没有反映更改。

这是我的代码：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    bs   = require('browser-sync');

// -- sass
//
gulp.task('sass', function () {
    return gulp
        .src('src/scss/*.scss')
        .pipe(sass({ includePaths: [ 'src/scss/include' ] }))
        .pipe(gulp.dest('wp-content/themes/my-theme'))
        .pipe(bs.reload({ stream: true }));
});

// -- serve
//
gulp.task('serve', [ 'sass' ], function() {

    bs({
        proxy: "http://my-site.com",
        files: "wp-content/themes/my-theme/style.css"
    });

    gulp.watch( "src/scss/**/*.scss", ['sass'] );
});

目前，我使用了笨拙的 Chrome 工作区覆盖，但工作流程并没有想象中的那么流畅。

提前致谢