browsersync代理流注入css但不渲染css

时间:2019-05-09 08:06:36

标签: gulp browser-sync gulp-watch gulp-sass

尝试通过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()函数似乎无法正常工作,但是我对此并不陌生,因此欢迎您提出任何建议。

0 个答案:

没有答案