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 ワークスペース オーバーライドを使用することにしましたが、ワークフローは思ったほどスムーズではありませんでした。
前もって感謝します