BrowserSync.stream() 不工作，browserSync.reload() 抛出错误答案

【问题标题】：BrowserSync.stream() not working, browserSync.reload() throws errorBrowserSync.stream() 不工作，browserSync.reload() 抛出错误
【发布时间】：2016-11-09 11:20:38
【问题描述】：

这是我的 Gulp 文件：

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    simplevars = require('postcss-simple-vars'),
    nested = require('postcss-nested'),
    cssImport = require('postcss-import'),
    browserSync = require('browser-sync').create();

gulp.task('default', function() {   
  console.log("Test to see if gulp is running");
});

gulp.task('html', function() {
  console.log("Something happening to my html");
});

gulp.task('styles', function() {
  return gulp.src('./app/assets/styles/styles.css')
  .pipe(postcss([cssImport, simplevars, nested, autoprefixer]))
  .pipe(gulp.dest('./app/temp/styles'));
});

gulp.task('cssInject', ['styles'], function() {
  return gulp.src('.app/temp/styles/styles.css')
  .pipe(browserSync.stream());
});

gulp.task('watch', function() {
  browserSync.init({
    notify:false,
    server: {
      baseDir: "app"
    }
  });

  watch('./app/index.html', function() {
    browserSync.reload();
  });

  watch('./app/assets/styles/**/*.css', function() {
    gulp.start('cssInject');
  });
});

当我运行gulp watch 任务时，index.html 文件会按预期重新加载。但是cssInject task 不会重新加载页面，也不会注入 css 更改。它什么也不做。如果我将 .pipe(browserSync.stream()); 更改为 .pipe(browserSync.reload());，它会重新加载 + 更新更改，但我收到此错误：

[BS] Reloading Browsers...
[11:15:36] 'cssInject' errored after 22 ms
[11:15:36] TypeError: Cannot read property 'on' of undefined
    at DestroyableTransform.Readable.pipe (C:\Users\z\OneDrive\NewWebsite\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:516:7)
    at Gulp.<anonymous> (C:\Users\z\OneDrive\NewWebsite\gulpfile.js:34:4)
    at module.exports (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\index.js:214:10)
    at C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\index.js:279:18
    at finish (C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\lib\runTask.js:21:8)
    at C:\Users\z\OneDrive\NewWebsite\node_modules\orchestrator\lib\runTask.js:52:4
    at f (C:\Users\z\OneDrive\NewWebsite\node_modules\once\once.js:17:25)
    at DestroyableTransform.onend (C:\Users\z\OneDrive\NewWebsite\node_modules\end-of-stream\index.js:31:18)
    at emitNone (events.js:72:20)
    at DestroyableTransform.emit (events.js:166:7)
    at C:\Users\z\OneDrive\NewWebsite\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:965:16
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

谁能建议我做错了什么？谢谢。

编辑添加：我有 2.12.8 版本的浏览器同步。

【问题讨论】：

标签： gulp browser-sync gulp-browser-sync

【解决方案1】：

将{ stream: true } 传递给.reload()：

return gulp.src('.app/temp/styles/styles.css')
    .pipe(browserSync.reload({ stream: true }));

然后改变

【讨论】：

试过了，但它仍然没有重新加载页面。当我手动重新加载页面时会反映更改，但不会自动触发。
@newbie 也许改变这个？ watch('./app/assets/styles/**/*.css', 'cssInject');
我想我修好了。我只使用 browserSync.reload() 和 cssInject 作为依赖项创建了另一个 gulp 任务（bs-reload）。然后我在 gulp watch 任务中使用 gulp 来启动 bs-reload 而不是 cssInject 。它重新加载页面。我不知道为什么，也不知道如何让 browserSync 流工作，但现在必须这样做。
在您的 cuss watch 任务中调用 gulp.start ：文档中没有 gulp.start。
@AnthonyWalsh 这是一个变量名。名称及其大小写由您决定，而不是您的环境。

【解决方案2】：

我看到了几个问题 - 正如我在评论中指出的那样，您使用了 gulp.start。试试

gulp.watch('./app/assets/styles/**/*.css', ['styles']);

gulp.task('styles', function() {
  return gulp.src('./app/assets/styles/styles.css')
    .pipe(postcss([cssImport, simplevars, nested, autoprefixer]))
    .pipe(gulp.dest('./app/temp/styles'))
    .pipe(browserSync.reload({ stream:true }));
});

我将您的“cssInject”任务和“样式”任务结合起来，因为您可以更轻松地在一项任务中完成您想做的事情。 browserSync.reload 调用将尝试注入更改的文件，而不是重新加载页面。 official gulp recipes for css injection. 有一些很好的 gulp 和 browserSync 食谱

【讨论】：