javascript - 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是发送数据时使用的元信息。

现在我想将 mustache 模板添加到我的 HTML 中。模板的数据将位于 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)
  });
});