1

这是我的 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 版本的浏览器同步。

4

2 回答 2

2

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

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

并改变

于 2016-11-09T11:51:30.327 回答
0

我看到了几个问题——正如我在评论中提到的，你使用了 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 调用将尝试注入更改的文件，而不是重新加载页面。在用于 css 注入的官方 gulp 食谱中有一些很好的 gulp 和 browserSync 食谱。

于 2016-11-10T05:19:48.113 回答