Question

我遇到一些问题，让浏览器同步与我的玉器设置一起玩得很好。

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

文件夹结构如下。

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观察者正在查看所有的玉文件（'jade / source / ** / * .jade'）

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

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

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

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

有什么想法吗？谢谢戴夫

Answer 1

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

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

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

BrowserSync和Jade自动重新加载

1 个答案: