BrowserSync 和 Jade 自动重新加载

Question

我在让 browsersync 与我的翡翠设置配合使用时遇到了一些问题。

我已将我的玉文件拆分为许多较小的部分，以包含在我的每个主模板中。

文件夹结构如下。

jade
   source
      _includes
         _header.jade
         _footer.jade
      template.jade

Gulp 任务：

gulp.task('jade', function() {
  var YOUR_LOCALS = {

  };

  gulp.src(config.src)
    .pipe(changed(config.dest, {extension: '.html'}))
    .pipe(jade({
      locals: YOUR_LOCALS,
      pretty: true,
      basedir: config.basedir
    }))

    .on('error', handleErrors)
    .pipe(gulp.dest(config.dest))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('browserSync', function() {
  browserSync(
    server: {
        baseDir: "./"
    });
});

gulp.task('watch', ['browserSync'], function() {
    gulp.watch(config.jade.watch, ['jade']);
});

nb. all of my paths are defined in a big ole' config object

我的 gulp watcher 正在查看所有的翡翠文件（'jade/source/**/*.jade'）

当我对我的 template.jade 文件进行更改时，该设置运行良好。但是，如果我对其中一个部分进行编辑，则任务不会运行。

这是因为.pipe(changed('./', {extension: '.html'}))

如果我删除这一行，所有的翡翠文件都会编译，并且浏览器会在浏览器中呈现更改之前重新加载多次（我经常需要手动刷新页面才能看到更改）。

我觉得我需要以某种形式使用.pipe(changed('./', {extension: '.html'})) 来阻止所有模板被处理，但它会捕获部分模板中所做的更改。

有什么想法吗？ 谢谢 戴夫

Answer 1

我不是 100% 这会解决您的问题，但是如果您在玉文件更改时将 browserSync.reload 作为第二个任务传递，您应该总是看到刷新：

gulp.task('watch', ['browserSync'], function() {
    gulp.watch(config.jade.watch, ['jade', browserSync.reload]);
});

注意：这将导致实际刷新并且不使用流。