Gulp 浏览器同步管道不工作

Question

我正在尝试让 browsersync(带流)工作，但它似乎在管道上下文中不起作用。 sass 编译正确，然后什么也没有发生。我的代码如下:

gulp.task('sass', function () {
  gulp.src('../css/source/*.scss')
    .on('error', function (err) {

         notify.onError({
           title:    "Gulp",
           subtitle: "Failure!",
           message:  "<%= error.message %>",
           sound:    "Beep"
       })(err);
       this.emit('end');
    })

    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write())
    .pipe(concat('build.css'))
    .pipe(gulp.dest('../css/build/dev'))
    .pipe(browserSync.reload({stream:true}))
    .pipe(csso())
    .pipe(gulp.dest('../css/build/min'));
});


gulp.task('default', ['browser-sync'], function(){

    gulp.watch('../css/source/*.scss', ['sass']);

});

在我的终端中它似乎确实注册了它:

[BS] 1 file changed (build.css)
[BS] File changed: ../css/build/dev/build.css

我可以重新加载的唯一方法是将它添加到监视任务中:

gulp.watch("../css/build/dev/*.css",  browserSync.reload);

...但是使用这种方法我似乎无法启用流，因为它不接受函数。我也根据当前文档尝试了 browserSync.stream() 无济于事。

如果有帮助，这里是 browsersync 任务:

gulp.task('browser-sync', ['sass'], function() {
    browserSync.init({
        proxy: 'local.test.com',
        host: '10.0.1.40'
    });
});

请帮忙!

Answer 1

在任务 sass 中删除到 browserSync 的管道，并向 browserSync.init() 添加一个 files 键>:

browserSync.init({
  ...
  files: ['../css/**/*.css'],
  ...
});

通过上述设置，您既不需要 gulp.watch()(用于根据文件更改启动任务)，也不需要依赖于 browserSync 的 gulp 任务。只需运行 gulp browser-sync。

请注意，这会直接监视 CSS，以避免 scss 更改和 browserSync 之间的竞争条件。