如何使用 gulp-tap 将文件名传递给 Gulp 管道中的下一个操作

Question

>我有一个 Gulp 任务，它使用 gulp-inline-css 从 CSS 文件中获取一个 HTML 文件和内联样式。我的任务的原始版本对每个 HTML 文件使用相同的 CSS 文件。现在，我想让任务根据正在处理的HTML文件的文件名选择一个CSS文件。

我正在使用gulp-tap来获取文件名。inliner()函数采用 CSS 文件的路径并运行所有内联内容。

以下 Gulp 任务为每个文件运行 inline((，但它似乎无法将结果注入回流中。我已经尝试了几种不同的方法，但我似乎无法将 inline(( 的结果恢复到原始流中。

gulp.task('inline', inline);
function inline() {
  return gulp.src('dist/**/*.html')
    .pipe(tap( (file, t) => {
      let fileName = path.basename(file.path);
      let cssPath = getStylesheetPathFromHtmlPath(fileName);
      return inliner(cssPath);
    }))
    .pipe(gulp.dest('dist'));
}
function inliner(cssPath) {
  var css = fs.readFileSync(cssPath).toString();
  var mqCss = siphon(css);
  var pipe = lazypipe()
    .pipe(inlineCss, {
      applyStyleTags: false,
      removeStyleTags: true,
      preserveMediaQueries: true,
      removeLinkTags: false
    })
    .pipe(replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe(replace, `<link rel="stylesheet" type="text/css" href="css/${getStylesheetNamespace(cssPath)}.css">`, '')
    .pipe($.htmlmin, {
      collapseWhitespace: true,
      minifyCSS: true
    });
  console.log(cssPath)
  return pipe();
}

我是否错误地使用吞咽水龙头？这似乎是一个非常简单的用例。

Answer 1

gulp-foreach 被 gulp-tap 和 gulp-flatmap 弃用。 gulp-flatmap是你在这里需要的，所以与Elliotregan的答案完全相同，但像这样：

function inline() {
  return gulp.src('dist/**/*.html')
    .pipe(flatmap((stream, file) => {
      let fileName = path.basename(file.path);
      let cssPath = getStylesheetPathFromHtmlPath(fileName);
      return stream 
        .pipe(inliner(cssPath));
    }))
    .pipe(gulp.dest('dist'));
}

谢谢艾略特，这也帮助了我，但我无法评论你的帖子，因为还没有足够的代表！

Answer 2

当我输入短语"对于每个文件"时，我记得有一个gulp-foreach包，它起作用了！我的新代码如下所示：

function inline() {
  return gulp.src('dist/**/*.html')
    .pipe(forEach( (stream, file) => {
      let fileName = path.basename(file.path);
      let cssPath = getStylesheetPathFromHtmlPath(fileName);
      return stream .pipe(inliner(cssPath));
    }))
    .pipe(gulp.dest('dist'));
}

如果有人愿意分享为什么我的原始代码不起作用......为什么gulp-tap似乎不允许您将东西注入回管道，那真是太棒了。否则，吸取的教训：

如果要将新内容重新导入管道，则用户gulp-foreach而不是gulp-tap。