你怎么能用 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-首先，您將使用 pipe 和 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();
    });
}