問題描述

我已閱讀 獲取 gulp.src 中的當(dāng)前文件名()，它似乎正在接近我想要做的事情，但我需要幫助.

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 中的以下函數(shù):

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

這些函數(shù)采用外部 CSS 文件并將它們內(nèi)聯(lián)到相應(yīng)的電子郵件 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 文件.如果要內(nèi)聯(lián) app.css 中的所有內(nèi)容，應(yīng)用的樣式將比實際需要的多得多.

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.

所以我想內(nèi)聯(lián):

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

等等.本質(zhì)上，我想在 Gulp Stream 中獲取當(dāng)時正在處理的 HTML 文件的名稱，將其保存為變量，然后將其傳遞給 inliner('dist/css/' + file.name +'.css') 位.我已經(jīng)用盡了我所有的 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 文件發(fā)送到其自己的小子流中，并帶有自己的 內(nèi)聯(lián)().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 內(nèi)置 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'));
}

這篇關(guān)于在 Gulp Stream 中獲取當(dāng)前文件名的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！