使用灯塔在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并获得报告。

有什么办法可以使用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');

UPDATE

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

我做

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 3

我也遇到过这个问题。我在github问题中找到了一些你无法以编程方式使用html选项的地方，但是Lighthouse确实公开了报告生成器，因此你可以编写简单的文件写入和打开函数来获得相同的效果。

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