在 Gulp Stream 中获取当前文件名

2022-01-12 00:00:00 html css gulp

我已阅读 获取 gulp.src 中的当前文件名()，它似乎正在接近我想要做的事情，但我需要帮助.

I've read Get the current file name in gulp.src(), and it seems like it's approaching what I am attempting to do, but I need help.

考虑 gulpfile.js 中的以下函数:

Consider the following function in a gulpfile.js:

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

和inliner()，要彻底(也在gulpfile中):

And inliner(), to be thorough (also in the 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 中.

These functions take an external CSS file and inline them into the respective HTML for email.

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

I really want to know how to do something like this:

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

你可能会问自己，为什么?"好吧，我没有一个 CSS 文件.如果要内联 app.css 中的所有内容，应用的样式将比实际需要的多得多.

And you might ask yourself, "why?" Well, I don't have just one CSS file. If everything from app.css was to be inlined, there would be a lot more styles applied than were actually necessary.

所以我想内联:

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

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

And so on. Essentially, I want to get the name of the HTML file being processed at that moment in the Gulp Stream, save it as a variable, and then pass it into the inliner('dist/css/' + file.name + '.css') bit. I've exhausted every bit of Gulp Knowledge I have and have come up completely and utterly blank.

推荐答案

基本上，您需要做的是将流中的每个 .html 文件发送到其自己的小子流中，并带有自己的 内联().gulp-foreach 插件让您做到这一点.

Basically what you need to do is send each .html file in your stream down its own little sub stream with its own inliner(). The gulp-foreach plugin let's you do just that.

然后，只需从文件的绝对路径确定文件的简单名称即可.node.js 内置 path.parse()让你在那里.

Then it's just a matter of determining the simple name of your file from its absolute path. The node.js built-in path.parse() got you covered there.

把它们放在一起:

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

相关文章