你怎么能用 Puppeteer 截取几百张截图？

Question

我有一个包含数百个 html 文件的文件夹。我需要为每一个截图，我想我可以在我的 Gulp 任务中使用 Puppeteer。

function takeScreenshots() {
    return gulp.src(path.join(paths.dest.stage, "**/*.html"))
        .pipe(tap(async (file) => {
            const browser = await puppeteer.launch({ headless: true });
            const page = await browser.newPage();
            await page.setViewport({
                width: 1024,
                height: 768,
                deviceScaleFactor: 1,
            });
            await page.goto("file://" + file.path);
            await page.screenshot({ path: path.join(path.dirname(file.path), path.basename(file.basename, ".html") + ".jpg"), quality: 10 });
            await browser.close();
        }));
}

当我运行它时，我的电脑风扇继续运转，事情被锁定，我收到以下消息：

(node:85389) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)

我认为它正在尝试同时完成所有屏幕截图，但我不知道如何告诉它拍摄一张，完成，然后移动到下一张等等。

Answer 1

我进行了快速搜索，但没有找到任何同步管道的方法。所以我写了一个解决方法。

1- 首先，您将使用管道和 gulp-tap 将所有文件添加到“文件”数组中

2- 然后在“结束”事件订阅

3- 然后编写依赖于文件数组的业务逻辑

function takeScreenshots() {
  const files = [];
  return gulp
    .src(path.join(paths.dest.stage, "**/*.html"))
    .pipe(
      tap((file) => {
        files.push(file);
      })
    )
    .on("end", async () => {
      const browser = await puppeteer.launch({ headless: true });
      const page = await browser.newPage();
      await page.setViewport({
        width: 1024,
        height: 768,
        deviceScaleFactor: 1,
      });

      for (let i = 0, len = files.length; i < len; i++) {
        const file = files[i];
        await page.goto("file://" + file.path);
        await page.screenshot({
          path: path.join(
            path.dirname(file.path),
            path.basename(file.basename, ".html") + ".jpg"
          ),
          quality: 10,
        });
      }

      await browser.close();
    });
}