Gulp 利用lighthouse实现HTML报表的批量生成

l5tcr1uw  于 2022-12-08  发布在  Gulp
关注(0)|答案(4)|浏览(217)

我在一个项目中使用了gulp,并在gulp任务中添加了lighthouse,如下所示:

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报告?
如果您认为这个问题对未来的读者有帮助,欢迎您开始奖励

3zwjbxry

3zwjbxry1#

@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,但它解决了问题:).

bweufnob

bweufnob2#

我也遇到过这个问题,我在github的某个问题中发现,你不能以编程方式使用html选项,但是Lighthouse确实公开了报告生成器,所以你可以围绕它编写简单的文件写入和打开函数来获得同样的效果。

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

xiozqbni3#

我知道

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

11dmarpk

11dmarpk4#

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

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

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

相关问题