node.js - gulp tap 进入无限循环

Question

我正在尝试获取 glob 流中的当前文件名，以便我可以将其传递给 jade 来正确命名我的模板。通常它看起来像:

gulp.task('templatesjs', function() {
  gulp.src('src/templates/*.jade')
    .pipe(jade({
      client: true,
      name:"filenamehere"
    }))
    .pipe(gulp.dest('build/templates'))
});

我在网上找到的提取流中文件名的唯一答案是使用 gulp-tap:

gulp.task('templatesjs', function() {
  gulp.src('src/templates/*.jade')
    .pipe(tap(function(file, t) {
      var filename = file.relative.split('.')[0];
      return t.through(jade, [{client:true, name:filename}]);
    }))
    .pipe(gulp.dest('build/templates'))
});

但由于某种原因，这进入了无限循环。例如，如果 glob 与 index.jade 匹配，则第一次迭代的 file.relative 将按预期设置为 index.jade，但随后它会陷入无限循环，其中 file.relative 设置为 index.js，并且 jade 编译器在尝试编译 index.js 文件时崩溃。我知道这一点的原因是，如果我省略 client:true 选项，则 file.relative 在第一次迭代中为 index.jade，在之后的所有迭代中为 index.html。这当然不会崩溃，但会陷入将index.html 编译为index.html 的无限循环中。

我的解决方案是检查文件扩展名，并且仅当我处于包含 Jade 文件的迭代中时才通过 Jade 进行管道传输。这解决了无限循环，但它很草率，它将一个jade文件复制到我的构建目录中(没什么大不了的)。它也仅适用于第一个文件，并且之后的所有文件都获取第一个文件的名称。我知道我做错了什么，但我不知道是什么。

gulp.task('templatesjs', function() {
  gulp.src('src/templates/*.jade')
    .pipe(tap(function(file, t) {
      sourcefile = file.relative;
      filename = sourcefile.split('.')[0]
      if(sourcefile.split('.')[sourcefile.split('.').length-1]!='js')
        return t.through(jade, [{client:true, name:filename}]);
      else
        return t;
    }))
    .pipe(gulp.dest('build/templates'))
});

Answer 1

通过through，您可以复制流，有效地创建流的流，从而形成无限循环。

这应该有效:

gulp.task('templatesjs', function() {
  gulp.src('src/templates/*.jade')
    .pipe(tap(function(file, t) {
      var filename = file.relative.split('.')[0];
      return gulp.src(file.path)
               .pipe(jade({client:true, name:filename}))
               .pipe(gulp.dest('build/templates'));
    })) 
});