如何使用Critical与Gulp为所有HTML文件生成Critical CSS

我完全懂你的烦恼——折腾了一整天想给目录里所有HTML文件批量生成Critical CSS，结果发现当前代码只能处理单个文件，原以为src参数支持数组，结果根本不行对吧？别慌，咱们可以通过遍历目录文件+循环调用critical生成方法来实现批量处理，下面给你具体的实现思路和代码：

核心思路 #

critical库的generate方法本身确实不支持直接传入文件路径数组，所以我们需要借助Node.js的fs和path模块先获取目标目录下的所有HTML文件，然后逐个调用critical.generate来处理每个文件。

完整代码示例 #

import fs from 'fs';
import path from 'path';
import critical from 'critical';

export const criticalCSS = async () => {
  // 定义你的基础目录（就是你代码里的_dist）
  const baseDirectory = '_dist';
  
  // 读取目录下所有文件，筛选出后缀为.html的文件
  const allHtmlFiles = fs.readdirSync(baseDirectory).filter(file => {
    return path.extname(file).toLowerCase() === '.html';
  });

  // 遍历每个HTML文件，逐个生成Critical CSS
  for (const htmlFile of allHtmlFiles) {
    try {
      // 这里可以根据你的需求调整CSS文件的路径：
      // 如果所有HTML共用一个index.css，就用下面的写法；
      // 如果每个HTML对应单独的CSS（比如page.html对应page.css），可以改成`path.join(baseDirectory, `${path.basename(htmlFile, '.html')}.css`)`
      const cssFilePath = path.join(baseDirectory, 'index.css');

      await critical.generate({
        inline: true,
        base: baseDirectory,
        src: htmlFile,
        css: cssFilePath,
        width: 960,
        height: 600,
        dest: htmlFile,
        extract: true,
        ignore: ['@font-face']
      });

      console.log(`✅ 成功处理文件：${htmlFile}`);
    } catch (error) {
      console.error(`❌ 处理文件${htmlFile}时出错：`, error);
    }
  }
};

关键注意点 #

• 异步处理：因为critical.generate是异步方法，所以我们把criticalCSS改成了async函数，用await确保每个文件处理完成后再进行下一个，避免并发过多导致的问题。如果想提高效率，也可以用Promise.all来并行处理（但要注意服务器资源占用）。
• CSS文件匹配：如果你的每个HTML文件对应单独的CSS文件，记得把cssFilePath改成动态匹配的形式，比如用path.basename(htmlFile, '.html')去掉.html后缀，再拼接.css。
• 错误处理：添加了try/catch块，这样即使某个文件处理失败，也不会导致整个批量任务中断，还能看到具体的错误信息。

内容的提问来源于stack exchange，提问作者Vera Perrone