尝试通过Browsersync和gulp设置实时站点的本地开发,但它只能部分起作用:它将SCSS文件编译为CSS文件,并且似乎也将其注入,至少在Firefox中(不能在Chrome中看到相同的结果)。保存SCSS文件时,似乎在firefox中更新了样式表,但是如果手动重新加载页面,则更改不会呈现,但是更改不会在任一浏览器http://prntscr.com/nmbpy1中呈现。
我用本地计算机上/ sets文件夹中的/ coresponding文件替换了远程站点上目录/ stylesDirOnSite /中的文件。 javascript的监视和重新加载工作与sass的监视和编译工作一样,很吸引人,但是stream()似乎有些问题
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
function style(){
return gulp.src('./scss/**/*.scss')
.pipe( sass().on( 'error', sass.logError ) )
.pipe( gulp.dest( './assets' ) )
.pipe( browserSync.stream() );
}
function watch(){
browserSync.init({
plugins: ['bs-console-qrcode'],
open: false,
proxy: "http://some.site.com/fu/bar/somedoc.html",
files: ['assets/**'],
serveStatic: [{
route: '/stylesDirOnSite',
dir: 'assets/'
}]
});
gulp.watch( './scss/**/*.scss', style );
gulp.watch( './assets/*.js' ).on( 'change', browserSync.reload );
}
exports.style = style;
exports.watch = watch;
对我来说,.stream()函数似乎无法正常工作,但是我对此并不陌生,因此欢迎您提出任何建议。