Gulp BrowserSync.stream（）不工作，BrowserSync.reload（）引发错误

这是我的吞咽文件：

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');
  });
});

当我运行

gulpwatch

任务时，

index.html

文件按预期重新加载。但是

cssInject任务

不会重新加载页面，也不会插入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)

[BS]正在重新加载浏览器。。。
[11:15:36]“cssInject”在22毫秒后出错
[11:15:36]TypeError:无法读取未定义的属性“on”
在DestroyableTransform.Readable.pipe（C:\Users\z\OneDrive\NewWebsite\node\u modules\乙烯基fs\node\u modules\Readable stream\lib\\u stream\u Readable.js:516:7）
狼吞虎咽。（C:\Users\z\OneDrive\NewWebsite\gulpfile.js:34:4）
在module.exports（C:\Users\z\OneDrive\NewWebsite\node\u modules\orchestrator\lib\runTask.js:34:7）
位于Gulp.Orchestrator.\u runTask（C:\Users\z\OneDrive\NewWebsite\node\u modules\Orchestrator\index.js:273:3）
在Gulp.Orchestrator.\u runStep（C:\Users\z\OneDrive\NewWebsite\node\u modules\Orchestrator\index.js:214:10）
在C:\Users\z\OneDrive\NewWebsite\node\u modules\orchestrator\index.js:279:18
完成时（C:\Users\z\OneDrive\NewWebsite\node\u modules\orchestrator\lib\runTask.js:21:8）
位于C:\Users\z\OneDrive\NewWebsite\node\u modules\orchestrator\lib\runTask.js:52:4
在f（C:\Users\z\OneDrive\NewWebsite\node\u modules\once\once.js:17:25）
在DestroyableTransform.oned（C:\Users\z\OneDrive\NewWebsite\node\u modules\end of stream\index.js:31:18）
在emitNone（events.js:72:20）
在DestroyableTransform.emit（events.js:166:7）
在C:\Users\z\OneDrive\NewWebsite\node\u modules\乙烯基fs\node\u modules\readable stream\lib\u stream\u readable.js:965:16
在下一个TTickCallbackwith0args（node.js:420:9）
在进程中调用（node.js:349:13）

有人能告诉我我做错了什么吗？多谢各位

编辑以添加：我有2.12.8版的浏览器同步。
将
{stream:true}
传递到
.reload（）
：

和更改
我看到了几个问题——正如我在您使用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”任务和“styles”任务结合起来，因为你可以在一个任务中更轻松地完成你想要的任务。如果可以的话，browserSync.reload调用将尝试注入更改的文件，而不是重新加载页面。在
上有一些很好的吞咽和浏览同步食谱，尝试过了，但仍然无法重新加载页面。当我手动重新加载页面时，这些更改会反映出来，但不会自动触发。@新手可能会更改吗<代码>观察（'./app/assets/styles/***.css'，cssInject'）我想我已经修好了。我使用browserSync.reload（）创建了另一个gulp任务（bs reload），并将cssInject作为依赖项。然后，在gulp watch任务中，我使用gulp来启动bs重新加载，而不是cssInject。它将重新加载页面。我不知道为什么，也不知道如何使browserSync流工作，但现在必须这样做。在你的cuss watch任务中，你调用gulp.start：文档中没有gulp.start。@AnthonyWalsh它是一个变量名。名称及其大小写由您决定，而不是由您的环境决定。
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 }));
});