Monday 12 June 2017

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

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.



via oatmealsnap

No comments:

Post a Comment