How do you pass a filename to the next action in a Gulp pipeline using gulp-tap?

Question

I have a Gulp task which takes an HTML file and inlines styles taken from a CSS file using gulp-inline-css. The original version of my task used the same CSS file for each HTML file. Now I would like to have the task choose a CSS file based on the filename of the HTML file it is processing.

I am using gulp-tap to get the filename. The inliner() function takes the path to the CSS file and runs all the inlining stuff.

The following Gulp task runs inliner() for each of the files, but it seems to be failing to inject the results back into the stream. I've tried a few different approaches, but I can't seem to get the results of inliner() back into the original stream.

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

Am I using gulp-tap incorrectly? This seems like a very simple use case.

Answer 1

When I typed the phrase "for each of the files", I remembered there is a gulp-foreach package, and it worked! My new code looks like this:

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

If anyone care to share why my original code was not working...why gulp-tap doesn't seem to allow you to inject stuff back into the pipeline, that would be awesome. Otherwise, lesson learned:

User gulp-foreach instead of gulp-tap if you want to get new back into the pipeline.

Answer 2

gulp-foreach was deprecated for gulp-tap and gulp-flatmap. gulp-flatmap is what you need here, so exactly the same as the answer by elliotregan but like this:

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

Thanks Elliot, this helped me too, but I couldn't comment on your post as not enough rep yet!