在 Gulp Stream 中获取当前文件名

Get current file name in Gulp Stream(在 Gulp Stream 中获取当前文件名)

问题描述

我已阅读 获取 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'));
}

这篇关于在 Gulp Stream 中获取当前文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！