在Gulp Stream中获取当前文件名 [英] Get current file name in Gulp Stream

问题描述

我读过获取gulp.src中的当前文件名（），它似乎接近我正在尝试做的事情，但我需要帮助。

考虑以下函数在 gulpfile.js ：

 函数inline（）{
 return gulp.src （'dist / ** / *。html'）
 .pipe（$。if（PRODUCTION，inliner（'dist / css / app.css'）））
 .pipe（gulp.dest 'DIST'））; 
 
  

和 inliner（），彻底（也在 gulpfile 中）：

 函数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中用于电子邮件。
 
 
 
 I 真的想知道如何做这样的事情： 
 
 <$ p $（$ / $ / *。html'）
 .pipe（$。if（PRODUCTION，inliner（' dist / css /'+ file.name +'.css'）））
 .pipe（gulp.dest（'dist'））; 
} 
  

你也许会问自己：为什么？好吧，我没有一个CSS文件。如果 app.css 中的所有内容都将被内联，将会有更多样式应用于实际需要。

<所以我想内联：

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

等等。从本质上讲，我希望获得当前在Gulp流中处理的HTML文件的名称，将其保存为变量，然后将它传递到 inliner（'dist / css /'+文件.name +'.css'）位。我已经用尽了所有的Gulp知识，并已完全空白。

解决方案

基本上你需要什么do就是用你自己的 inliner（）向你的流中的每个 .html 文件发送它自己的小子流。 gulp-foreach 插件让我们你就是这样做的。

然后，这只是一个从绝对路径确定文件的简单名称的问题。 node.js内置了 path.parse（）

 
 
 code> var path = require（'path'）; 
 
函数inline（）{
 return gulp.src（'dist / ** / *。html'）
 .pipe（$。if（PRODUCTION，$ .foreach函数（流，文件）{
 var name = path.parse（file.path）.name; 
 return stream.pipe（inliner（'dist / css /'+ name +'.css'） ）; 
}）））
 .pipe（gulp.dest（'dist'））; 
} 
  

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.

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

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

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

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.

So I want to inline:

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

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.

解决方案

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.

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.

Putting it all together:

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中获取当前文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！