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 Stream中获取当时正在处理的HTML文件的名称，将其保存为变量，然后将其传递到inliner('dist/css/' + file.name + '.css')位。我已经筋疲力尽了所有的Gulp知识，并且已经完全彻底地出现了。

Answer 1

基本上您需要做的是将流中的每个.html文件发送到自己的小子流中，并使用自己的inliner()。 gulp-foreach插件让你做到这一点。

然后，只需从绝对路径确定文件的简单名称即可。内置path.parse()的node.js让你了解它。

全部放在一起：

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中的当前文件名

1 个答案: