Generating HTML report in gulp using lighthouse Generating HTML report in gulp using lighthouse google-chrome google-chrome

Generating HTML report in gulp using lighthouse


The answer from @EMC is fine, but it requires multiple steps to generate the HTML from that point. However, you can use it like this (written in TypeScript, should be very similar in JavaScript):

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

Then call it:

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


UPDATE

There have been some changes to the lighthouse repo. I now enable programmatic HTML reports as follows:

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 setupconst raw = await lighthouse(url, flags, config);await write(reportGenerator.generateReportHtml(raw.lhr), 'html', root('report.html'));

I know it's hacky, but it solves the problem :).


I've run into this issue too. I found somewhere in the github issues that you can't use the html option programmatically, but Lighthouse does expose the report generator, so you can write simple file write and open functions around it to get the same effect.

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


I do

let opts = {    chromeFlags: ['--show-paint-rects'],    output: 'html'}; ...const lighthouseResults = await lighthouse(urlToTest, opts, config = null);

and later

JSON.stringify(lighthouseResults.lhr)

to get the json

and

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

to get the html