使用browserSync的Gulp手表

时间:2016-08-19 13:33:01

标签: javascript gulp node-streams

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

  1. 运行在任何模板更改时重建Handlebars模板的监视任务。
  2. 如果构建失败,它会通过notify()方法通知BrowserSync,这样如果出现问题我可以在浏览器中看到弹出窗口。 观看不应停止。
  3. 如果构建正常,则调用browserSync.reload()。
  4. 所以我提出了以下代码:

    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' event是emmits,并且调用了browserSync.reload()。所以我没有在浏览器中看到任何错误通知。 另一方面没有"水管工"任何构建错误都会破坏监视任务。

    有什么想法吗?

1 个答案:

答案 0 :(得分:2)

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