1

我有一个 Gulp 任务，它使用 gulp-inline-css 从 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-tap？这似乎是一个非常简单的用例。

4

2 回答 2

3

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

谢谢埃利奥特，这对我也有帮助，但我无法评论你的帖子，因为还没有足够的代表！

于 2018-06-02T10:18:51.453 回答
1

当我输入短语“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'));
}

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

用户gulp-foreach而不是gulp-tap如果您想让新的回到管道中。

于 2017-06-13T00:46:00.993 回答