Gulp browsersync 管道不起作用答案

【问题标题】：Gulp browsersync pipe not workingGulp browsersync 管道不起作用
【发布时间】：2015-08-26 13:31:36
【问题描述】：

我正在尝试让 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'
    });
});

请帮忙！

【问题讨论】：

嗨，克里斯，您的目标只是使用浏览器同步来重新加载浏览器并将更改注入 CSS 文件吗？
是的，目前我只想注入样式而不是重新加载浏览器。
我已经用 Stylus 为简单项目而不是 SASS 做了很多，我可以提出一个解决方案，但它可能与您的设置略有不同，它使用 nodemon 和浏览器同步来注入对 css 的更改并在检测到更改时重新加载 js/html。区别主要在于我如何构建代码和我的 css 预处理器。

标签： gulp browser-sync

【解决方案1】：

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

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

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

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

【讨论】：