3

我正在尝试让浏览器同步（带流）工作，但它似乎在管道上下文中不起作用。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'
    });
});

请帮忙！

4

1 回答 1

0

browserSync在任务中删除管道sass，并添加一个files键browserSync.init()：

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

通过上述设置，您既不需要gulp.watch()（用于基于文件更改启动任务）也不需要依赖browserSync. 简单地运行gulp browser-sync。

请注意，这会直接监视 CSS 以避免scss更改和browserSync.

于 2015-10-17T04:20:11.340 回答