Node.js 如何使用Gulp tap将文件名传递给Gulp管道中的下一个操作？

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

我正在使用

gulp-tap

获取文件名。

inliner（）

函数获取CSS文件的路径并运行所有内联内容

下面的Gulp任务为每个文件运行inliner（），但似乎无法将结果注入流中。我尝试了几种不同的方法，但似乎无法将inliner（）的结果返回到原始流中

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

gulp.task（'inline'，inline）；
函数内联（）{
return gulp.src（'dist/***/.html'）
.pipe（tap（（文件，t）=>{
让fileName=path.basename（file.path）；
设cssPath=getStylesheetPathFromHtmlPath（文件名）；
回流管（cssPath）；
}))
.pipe（大口目的地（'dist'））；
}
函数内联线（cssPath）{
var css=fs.readFileSync（cssPath.toString（）；
var mqCss=虹吸（css）；
var管道=懒散管道（）
.管道（内部）{
applyStyleTags:false，
removeStyleTags：对，
问：是的，
removeLinkTags:false
})
.pipe（替换“”，`${mqCss}`）
.管道（替换，`，''）
.pipe（$.htmlmin{
拼贴空白：对，
minifyCSS：对
});
console.log（cssPath）
回流管（）；
}

我是不是用错了水龙头？这似乎是一个非常简单的用例。

当我键入短语“for each of the files”时，我记得有一个

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

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

如果有人愿意分享我的原始代码不起作用的原因……为什么

gulp-tap

似乎不允许您将内容注入管道，那就太棒了。否则，吸取的教训是：

用户

gulp-foreach

而不是

gulp-tap

，如果你想让新的内容回到管道中。

当我输入短语“每个文件”时，我记得有一个

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

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

如果有人愿意分享我的原始代码不起作用的原因……为什么

gulp-tap

似乎不允许您将内容注入管道，那就太棒了。否则，吸取的教训是：

---

如果您想让新产品重新进入生产线，请使用

gulp-foreach

而不是

gulp-tap

。

gulp-foreach不推荐用于gulp-tap和gulp-flatmap。gulp flatmap是您在此需要的，因此与elliotregan的答案完全相同，但如下所示：

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

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

---

谢谢埃利奥特，这对我也有帮助，但我不能评论你的文章，因为还没有足够的代表

gulp foreach因gulp-tap和gulp-flatmap而被弃用。gulp flatmap是您在此需要的，因此与elliotregan的答案完全相同，但如下所示：

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

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

---

谢谢埃利奥特，这对我也有帮助，但我不能评论你的文章，因为还没有足够的代表

谢谢你！我在使用

gulp-tap

时遇到了完全相同的问题，切换到

gulp-foreach

对我也适用。

gulp-foreach

已被弃用。尝试使用下面的Jamie Kemp那样的

gulp flatmap

。谢谢！我在使用

gulp-tap

时遇到了完全相同的问题，切换到

gulp-foreach

对我也适用。

gulp-foreach

已被弃用。试着像下面的杰米·肯普那样使用

gulpflatmap

。