BrowserSync to inject css into a live WordPress page via proxy

I am trying to use BrowserSync & sass to edit the style.css from a WordPress site.
I’d like to inject the changes into the page and reload it automatically.

So far I tried a lot of variants to the gulpfile.js code without success — the scss files compile into style.css (ok), but the page doesn’t reflect the changes.

Read More

Here is my code:

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'] );
});

For the moment, I resorted to use the awkward Chrome workspace override, but the workflow is not as smooth as it could be.

Thanks in advance

Related posts

Leave a Reply