使用 critical 和 Gulp 为每个 *.HTML 文件生成关键 CSS答案

【问题标题】：Generate Critical CSS for every *.HTML file using critical and Gulp使用 critical 和 Gulp 为每个 *.HTML 文件生成关键 CSS
【发布时间】：2018-04-09 07:59:30
【问题描述】：

好的，过去一天我一直在努力解决这个问题。我正在尝试为我目录中的每个 HTML 文件生成关键的 CSS。我当前在单个文件上运行良好的工作代码：

export const criticalCSS = () => {
  return critical.generate({
    inline: true,
    base: '_dist',
    src: 'index.html',
    css: '_dist/index.css',
    width: 960,
    height: 600,
    dest: 'index.html',
    extract: true,
    ignore: ['@font-face']
  })
}

通常我应该期望 src 接受一组文件路径，从我在每个 grunt 教程中看到的内容来看，grunt 插件就是这种情况。但是，我无法让它在 gulp 上运行。我看过一些建议 gulp-foreach 的帖子，但这似乎也不起作用。

对于每个示例：

export const criticalCSS = () => {
  return gulp.src(paths.html.src).pipe(
    foreach(function (stream, file) {
      return stream.pipe(
        critical.generate({
          inline: true,
          base: '_dist',
          src: file.path,
          css: '_dist/index.css',
          width: 960,
          height: 600,
          dest: file.path,
          extract: true,
          ignore: ['@font-face']
        })
      )
    })
  )
}

有人搞定这个吗？我能想象的唯一另一件事是使用每个 HTML 文件路径对数组进行硬编码，然后通过 critical.generate 函数循环遍历它们。但是，如果我必须手动指定每个 HTML 文件，这将无法维护。

【问题讨论】：

标签： javascript gulp

【解决方案1】：

如果您正在使用库critical。

我一直有这样的成功：

var critical = require('critical').stream;
gulp.task('html-inline-critical', function () {
return gulp.src('public/**/*.html', {base: './'})
    .pipe(
        critical({
            base: 'public/',
            inline: true,
            css: [
                'public/c/css/main.css'
            ],
            dimensions: [
                {height: 720, width: 1280}
            ],
            minify: true,
            timeout: 120000
        });
    )
    .on('error', function(err) { 
        gutil.log(gutil.colors.red(err.message)); 
    })
    .pipe(gulp.dest('./'));
});

【讨论】：