在Gulp Stream中獲取當前文件名

Question

我讀過Get the current file name in gulp.src()，它似乎正在接近我正在嘗試執行的操作，但我需要幫助。

考慮在gulpfile.js以下功能：

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

而且inliner()，是徹底的（也是在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。

我真的想知道如何做這樣的事情：「爲什麼？」

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

而且你可能會問自己，好吧，我沒有一個CSS文件。如果app.css中的所有內容都是內聯的，則會應用比實際需要更多的樣式。

所以我想內聯：

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

等。本質上，我想要得到當前在Gulp流中正在處理的HTML文件的名稱，將其保存爲變量，然後將其傳遞到inliner('dist/css/' + file.name + '.css')位。我已經用盡了所有的Gulp知識，並且已經完全和完全空白。

Answer 1

基本上你需要做的是發送你的數據流中的每個.html文件到它自己的小子流中並使用它自己的inliner()。 gulp-foreach插件讓你做到這一點。

然後，它只是從絕對路徑確定文件的簡單名稱。 node.js內置的path.parse()讓你在那裏覆蓋。

全部放在一起：

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