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添加模板。模板的数据将在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管道的问题，我无法将一个文件的内容传递给胡须功能。我有什么遗失的吗？

这似乎是一项非常简单的任务，我已经搜索了几个小时而没有任何进展。 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)
  });
});

Gulp：编译胡子时避免使用中间文件

1 个答案: