Generating HTML report in gulp using lighthouse

Ask Time：2017-09-13T21:41:35 Author：bhansa

I am using gulp for a project and I added lighthouse to the gulp tasks like this:

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

It gives me the json output in command line. I can post my json here and get the report.

Is there any way I can generate the HTML report using gulp ?

You are welcome to start a bounty if you think this question will be helpful for future readers.

Author:bhansa，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/46199188/generating-html-report-in-gulp-using-lighthouse

EMC :

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. \n\nconst ReportGenerator = require('../node_modules/lighthouse/lighthouse-core/report/v2/report-generator.js');\n",

2017-10-28T03:46:34

Tobi :

I do\n\nlet opts = {\n chromeFlags: ['--show-paint-rects'],\n output: 'html'\n}; ...\n\nconst lighthouseResults = await lighthouse(urlToTest, opts, config = null);\n\n\nand later \n\nJSON.stringify(lighthouseResults.lhr)\n\n\nto get the json\n\nand \n\nlighthouseResults.report.toString('UTF-8'),\n\n\nto get the html",

2019-04-25T12:23:38

Nicky :

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):\n\nconst { write } = await import(root('./node_modules/lighthouse/lighthouse-cli/printer'));\n\n\nThen call it:\n\nawait write(results, 'html', 'report.html');\n\n\n\nUPDATE\n\nThere have been some changes to the lighthouse repo. I now enable programmatic HTML reports as follows:\n\nconst { write } = await import(root('./node_modules/lighthouse/lighthouse-cli/printer'));\nconst reportGenerator = await import(root('./node_modules/lighthouse/lighthouse-core/report/report-generator'));\n\n// ...lighthouse setup\n\nconst raw = await lighthouse(url, flags, config);\nawait write(reportGenerator.generateReportHtml(raw.lhr), 'html', root('report.html'));\n\n\nI know it's hacky, but it solves the problem :).",

2017-11-15T23:02:52

Generating HTML report in gulp using lighthouse