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。这解决了无限循环，但它很邋and，它将一个玉文件复制到我的构建目录中（并不是一件大事）。它也只适用于第一个文件，以及获取第一个文件名后的所有文件。我知道我做错了什么，但我无法弄清楚是什么。

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'));
    })) 
});

Answer 2

所以我仍然不会真正理解乙烯基流或点击，但至少我使用了这一切：

https://www.npmjs.com/package/gulp-jade-jst-concat

并且在挣扎了4个小时后让它在3分钟内工作......

即使修改了示例，我也无法让其他模块（https://www.npmjs.com/package/gulp-tree-concat）工作。希望这可以帮助某人使用他们的客户端gulp-jade模块。

gulp tap进入无限循环

2 个答案: