google-chrome - 使用 Lighthouse 在 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并获取报告。

有什么方法可以使用gulp生成 HTML 报告？

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

Answer 1

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

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

然后调用它：

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

更新

lighthouse回购协议发生了一些变化。我现在启用编程 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，但它解决了问题:)。

Answer 2

我也遇到过这个问题。我在 github 问题的某处发现您无法以编程方式使用 html 选项，但 Lighthouse 确实公开了报告生成器，因此您可以围绕它编写简单的文件写入和打开函数以获得相同的效果。

const ReportGenerator = require('../node_modules/lighthouse/lighthouse-core/report/v2/report-generator.js');

Answer 3

我愿意

let opts = {
    chromeFlags: ['--show-paint-rects'],
    output: 'html'
}; ...

const lighthouseResults = await lighthouse(urlToTest, opts, config = null);

然后

JSON.stringify(lighthouseResults.lhr)

获取 json

和

lighthouseResults.report.toString('UTF-8'),

获取 html

Answer 4

您可以将 gulp 中的预配置定义为

const preconfig = {logLevel: 'info', output: 'html', onlyCategories: ['performance','accessibility','best-practices','seo'],port: (new URL(browser.wsEndpoint())).port};

输出选项可以用作 html 或 json 或 csv。这个预配置只不过是根据我们希望它如何运行并为我们提供解决方案的灯塔配置。