Creating HTML report in gulp using a beacon

Question

I use gulp for the project and added a beacon to the gulp tasks as follows:

gulp.task("lighthouse", function(){ return launchChromeAndRunLighthouse('http://localhost:3800', flags, perfConfig).then(results => { console.log(results); }); }); 

And this is my launchChromeAndRunLighthouse () function

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

This gives me JSON output on the command line. I can post my JSON here and get a report.

Is there any way to generate an HTML report using gulp ?

You can start a reward if you think this question will be useful to future readers.

Answer 1

The answer from @EMC is good, but it takes a few steps to generate HTML. However, you can use it like this (written in TypeScript, it should be very similar to JavaScript):

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

Then call it:

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

UPDATE

There lighthouse been some changes in the lighthouse repo. Now I include HTML programming 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 setup const raw = await lighthouse(url, flags, config); await write(reportGenerator.generateReportHtml(raw.lhr), 'html', root('report.html')); 

I know these are hacks, but this solves the problem :).

Answer 2

I also ran into this problem. I found somewhere in github problems that you cannot use the html option programmatically, but Lighthouse exposes a report generator, so you can write simple functions to write and open files around it to get the same effect.

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

Answer 3

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 json

and

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

to get HTML