使用 Lighthouse 在 gulp 中生成 HTML 报告答案

【问题标题】：Generating HTML report in gulp using lighthouse使用 Lighthouse 在 gulp 中生成 HTML 报告
【发布时间】：2018-02-22 06:17:47
【问题描述】：

我在一个项目中使用 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 报告？

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

【问题讨论】：

标签： google-chrome gulp lighthouse

【解决方案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，但它解决了问题:)。

【讨论】：

用 JavaScript 为我工作！ const { write } = require('lighthouse/lighthouse-cli/printer'); 然后write(results, 'html', 'report.html')
完美 :) 很好听
经过几次更改后，我得到了它的工作。谢谢:)

【解决方案2】：

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

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

【讨论】：

您能否详细说明一下使用此模块生成报告。

【解决方案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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：