Question

这是我的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。

Answer 1

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

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

并改变

Answer 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＆＃39;任务和＆＃39;风格＆＃39;任务，因为你可以更容易地在一个任务中做你想做的事。如果可以而不是重新加载页面，则browserSync.reload调用将尝试注入已更改的文件。 official gulp recipes for css injection.

有一些很好的gulp和browserSync配方

BrowserSync.stream（）无效，browserSync.reload（）抛出错误

2 个答案: