本文介绍了在Gulp Stream中获取当前文件名的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我读过，它似乎接近我正在尝试做的事情，但我需要帮助。
考虑以下函数在 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知识，并已完全空白。
解决方案 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中获取当前文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！