如何在Gulp中批量为所有.html页面生成Critical CSS？

我之前也踩过这个坑！Google这款生成Critical CSS的npm包确实性能拉满、用着顺手，但在Gulp环境里只能单文件处理的限制真的很闹心——手动列页面数组不仅麻烦，还容易触发Node.js内存溢出的问题。分享几个亲测有效的解决方案：

方案1：用through2实现自动批量单文件处理 #

核心思路是借助through2这个流处理工具，让Gulp自动遍历匹配的HTML文件，逐个传给Critical CSS工具处理，既不用手动维护页面列表，还能避免一次性加载所有文件导致的内存暴涨。

先安装依赖：

npm install through2 --save-dev

然后编写Gulp任务：

const gulp = require('gulp');
const through2 = require('through2');
const critical = require('你使用的Google Critical CSS包名'); // 替换为实际包名

gulp.task('build-critical-css', async function() {
  return gulp.src('app/*.html')
    // 自定义流处理每个HTML文件
    .pipe(through2.obj(async function(file, _, cb) {
      try {
        // 针对单个文件调用Critical CSS生成方法
        const criticalStyles = await critical.generate({
          base: './app/',
          src: file.path,
          width: 1200, // 你的视口宽度配置
          height: 800, // 你的视口高度配置
          // 其他工具配置参数...
        });

        // 生成对应的Critical CSS文件（和原HTML同名）
        const outputFile = file.clone();
        outputFile.path = file.path.replace('.html', '-critical.css');
        outputFile.contents = Buffer.from(criticalStyles);

        this.push(outputFile);
        cb();
      } catch (error) {
        console.error(`处理文件 ${file.path} 失败:`, error);
        cb(error);
      }
    }))
    .pipe(gulp.dest('./dist/')); // 输出到目标目录
});

这个方案的优势：

• 自动匹配app/*.html下的所有文件，不用手动维护页面数组
• 串行处理单个文件，内存占用更稳定，不会一次性加载所有文件到内存
• 处理结果可以直接通过Gulp流输出到指定目录，和现有构建流程无缝衔接

方案2：优化内存回收（辅助方案） #

如果还是遇到内存问题，可以在Node.js启动时开启手动垃圾回收，在每个文件处理完成后触发回收：

1. 启动Gulp时添加参数：

node --expose-gc ./node_modules/gulp/bin/gulp.js build-critical-css

2. 在任务中添加垃圾回收调用（注意仅在调试/内存压力大时使用）：

// 在处理完单个文件后添加
if (global.gc) {
  global.gc();
}

方案3：限制并发处理数（进阶优化） #

如果你的HTML文件数量极多，可以用gulp-parallel或自定义并发控制，限制同时处理的文件数量，进一步降低内存负载：

const parallel = require('gulp-parallel');

// 限制同时处理2个文件
gulp.task('build-critical-css', parallel(2, function(file) {
  // 这里写单个文件的处理逻辑
}));

亲测方案1是最省心的，既解决了手动列页面的麻烦，又搞定了内存问题，完全适配Gulp的批量处理逻辑。

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