Gulp：编译 mustache 时避免中间文件

Question

我的仓库中有以下目录结构：

src
  some-project
    some-file.html
    some-file.yml
  other-project
    foo.html
    foo.yml
    bar.html
    bar.yml
  stylesheet.css

dist
  some-project
    some-file.html
    some-file.yml
  other-project
    foo.html
    foo.yml
    bar.html
    bar.yml

我有一个 gulp 任务，它采用 /src 文件夹中的 html 文件添加的任何样式表中的样式，并自动将它们内联到 html 中（这些是电子邮件）。 yml 是发送数据时使用的元信息。

现在我想在我的 HTML 中添加 mustache 模板。模板的数据将在 yml 文件中。我遇到的问题是 gulp-mustache 插件为其模板输入采用流，并为其数据采用参数中的对象。

gulp.task('build', () => {
  gulp.src('src/**/*.html')
    .pipe(mustache(data)) // I don't have the data!
    .pipe(inlineCss({
      removeStyleTags: false
    }))
    .pipe(prefix(BASE_URL, [ { match: "img[src]", attr: "src"} ]))
    .pipe(gulp.dest('dist'))
});

我有另一个可以将 YML 编译为 JSON 的任务，但我试图避免创建临时文件，因为它破坏了拥有 gulp 的虚拟文件流的全部意义。此外，它并没有解决我有两个任务和两个 gulp 管道的问题，我无法将一个文件的内容传递给 mustache 函数。我有什么遗漏吗？

这似乎是一项非常简单的任务，我已经搜索了几个小时没有任何进展。没有办法让 gulp 读取每对文件吗？

Answer 1

好吧，我首先注意到的是，您在 Gulp 任务中没有返回任何内容，这会阻止 Gulp 知道您的任务何时完成。

由于任务本身是异步的，并且 Gulp 支持任务 returning a Promise，它会在它解决时发出完成信号，您可以使用 node-yaml 包执行类似的操作，该包也返回一个 Promise：

const yaml = require('node-yaml')

gulp.task('build', () => {
  return yaml.read('my-data.yml').then(data =>
    new Promise(resolve => {
      gulp.src('src/**/*.html')
        .pipe(mustache(data))
        // ...
        .pipe(gulp.dest('dist'))
        .on('end', resolve)
    });
  );
});

或者干脆使用callbacks:

gulp.task('build', callback => {
  return yaml.read('my-data.yml', data => {
    gulp.src('src/**/*.html')
      .pipe(mustache(data))
      // ...
      .pipe(gulp.dest('dist'))
      .on('end', callback)
  });
});