Gulp 使用 browserSync 观看

Question

我正在尝试编写一个执行以下操作的 gulp 文件：

运行监视任务，在任何模板更改时重建 Handlebars 模板。
如果构建失败，它会通过 notify() 方法通知 BrowserSync，这样我就可以在出现问题时在浏览器中看到弹出窗口。 手表不应该停止。
如果构建正常，它会调用 browserSync.reload()。

所以我想出了以下代码：

function SomeTask() {
  return gulp.src('*.hbs')
         .pipe(plumber())
         .pipe(somePlugin1())
         .pipe(somePlugin2())
         .pipe(gulp.dest('dest'));
}

gulp.watch(['*.hbs'], function(event) {
  SomeTask()
  .on('error', function(error) {
    browserSync.notify('ERROR!');
  })
  .on('end', browserSync.reload)
})

问题是如果我使用 gulp-plumber 'end' 事件是 emmits 并且 browserSync.reload() 被调用。所以我没有在浏览器中看到任何错误通知。另一方面，没有 "plumber" 任何构建错误都会中断监视任务。

有什么想法吗？

Answer 1

gulp-plumber 让我们提供一个自定义 errorHandler function。您可以将 browserSync.notify() 电话放在那里：

function SomeTask(handler) {
  return gulp.src('*.hbs')
    .pipe(plumber({errorHandler: handler}))
    .pipe(somePlugin1())
    .pipe(somePlugin2())
    .pipe(gulp.dest('dest'));
}

gulp.watch(['*.hbs'], function(event) {
  var failed = false;
  SomeTask(function(error) {
    browserSync.notify('ERROR: ' + error.message);
    console.log(error.toString());
    failed = true;
  })
  .on('end', function() {
    if (!failed) {
      browserSync.reload();
    }
  });
});

Gulp 使用 browserSync 观看

Gulp watch with browserSync

javascript

gulp

node-streams