1

我在让浏览器同步与我的翡翠设置配合使用时遇到了一些问题。

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

文件夹结构如下。

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

吞咽任务：

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'}))某种形式使用来阻止所有模板被处理，但在其中捕获部分模板中所做的更改。

有任何想法吗？谢谢戴夫

4

1 回答 1

1

I'm not 100% this will solve your problem but if you pass browserSync.reload as a second task when a jade file changes you should always see a refresh:

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

Note: this will cause an actual refresh and doesn't use streams.

于 2015-03-09T12:07:25.393 回答