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

をそして、あなたは、自分自身を頼むかもしれない「なぜ？」まあ、私はただ1つの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')); 
}