google-chrome - 使用灯塔在 gulp 中生成 HTML 报告

Question

我正在将 gulp 用于一个项目，并将灯塔添加到 gulp 任务中，如下所示:

gulp.task("lighthouse", function(){
    return launchChromeAndRunLighthouse('http://localhost:3800', flags, perfConfig).then(results => {
      console.log(results);
    });
});

这是我的 launchChromeAndRunLighthouse() 函数

function launchChromeAndRunLighthouse(url, flags = {}, config = null) {
  return chromeLauncher.launch().then(chrome => {
    flags.port = chrome.port;
    return lighthouse(url, flags, config).then(results =>
      chrome.kill().then(() => results));
  });
}

它在命令行中给了我 json 输出。我可以发布我的 json here并得到报告。

有什么方法可以使用 生成 HTML 报告吗？大口大口 ?

欢迎您到 开始赏金 如果您认为这个问题对 future 的读者有帮助。

Answer 1

@EMC 的答案很好，但从那时起生成 HTML 需要多个步骤。但是，您可以像这样使用它(用 TypeScript 编写，在 JavaScript 中应该非常相似):

const { write } = await import(root('./node_modules/lighthouse/lighthouse-cli/printer'));

然后调用它:

await write(results, 'html', 'report.html');

更新
lighthouse 有一些变化 repo 。我现在启用程序化 HTML 报告如下:

const { write } = await import(root('./node_modules/lighthouse/lighthouse-cli/printer'));
const reportGenerator = await import(root('./node_modules/lighthouse/lighthouse-core/report/report-generator'));

// ...lighthouse setup

const raw = await lighthouse(url, flags, config);
await write(reportGenerator.generateReportHtml(raw.lhr), 'html', root('report.html'));

我知道它很hacky，但它解决了问题:)。