在Gulp Stream中获取当前文件名

ethfun 发表于 Dev

ethfun

我已经阅读了在gulp.src（）中获取当前文件名的方法，看来它正在接近我要尝试执行的操作，但是我需要帮助。

在中考虑以下功能gulpfile.js：

function inline() {
  return gulp.src('dist/**/*.html')
    .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
    .pipe(gulp.dest('dist'));
}

并且inliner()，要更全面（也在gulpfile）：

function inliner(css) {
  var css = fs.readFileSync(css).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false,
      removeStyleTags: false,
      removeLinkTags: false
    })
    .pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`);

  return pipe();
}

这些功能获取一个外部CSS文件，并将它们内联到相应的HTML中以发送电子邮件。

我真的很想知道如何做这样的事情：

function inline() {
  return gulp.src('dist/**/*.html')
    .pipe($.if(PRODUCTION, inliner('dist/css/' + file.name + '.css')))
    .pipe(gulp.dest('dist'));
}

您可能会问自己：“为什么？” 好吧，我没有一个CSS文件。如果app.css要内联所有内容，那么将应用比实际需要的样式更多的样式。

所以我想内联：

email1.css    ----  to  ------->    email1.html
email2.css    ----  to  ------->    email2.html
email3.css    ----  to  ------->    email3.html

等等。本质上，我想获取当时在Gulp流中正在处理的HTML文件的名称，将其保存为变量，然后将其传递给该inliner('dist/css/' + file.name + '.css')位。我已经用尽了所有的Gulp知识，并且完全空白了。

斯文·舍嫩

基本上，您需要做的是将.html流中的每个文件通过自己的子流向下发送inliner()。该gulp-foreach插件让您做到这一点。

然后，只需从文件的绝对路径确定文件的简单名称即可。内置的node.js可以满足path.parse()您的要求。

放在一起：

var path = require('path');

function inline() {
  return gulp.src('dist/**/*.html')
    .pipe($.if(PRODUCTION, $.foreach(function(stream, file) {
       var name = path.parse(file.path).name;
       return stream.pipe(inliner('dist/css/' + name + '.css'));
     })))
    .pipe(gulp.dest('dist'));
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。