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');

的更新

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');

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

3 个答案: