1

I don't want to install the node modules again and again so I found a post here.

It uses npm link to let me require global packages.

However, when I use the method, the html-minifier-terser is not working properly. The minify function returns Promise { <pending> } instead of the HTML.

But it works fine with the same build.js while in that project, the pug and html-minifier-terser are install locally by npm install not npm install -g

Here is the code:

const fs = require('fs');
// Compile the source code
const pug = require('pug');
// Compile the source code


buildFile('index');

function buildFile(filename) {

  var fs_content = fs.readFileSync(`./data/page-${filename}.json`);
  var options = JSON.parse(fs_content);

  const compiledFunction = pug.compileFile(`./pugs/${filename}.pug`,{});

  // Render a set of data
  var pug_html = (compiledFunction(options)); // this works fine.
  var minify = require('html-minifier-terser').minify;
  var result = minify(pug_html, {
    removeAttributeQuotes: true,
    minifyJS:true,
    minifyCSS:true,
    removeComments:true,
    collapseWhitespace:true,
    collapseInlineTagWhitespace:true
  });
  console.log(result); // Returns Promise { <pending> } instead of the HTML
}

Update:

I tried await but it fails too:

  var result = await minify(pug_html, {
               ^^^^^

SyntaxError: await is only valid in async function
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
AGamePlayer
  • 7,404
  • 19
  • 62
  • 119
  • eh, it's always supposed to return a promise isn't it? https://github.com/terser/html-minifier-terser The examples all use async/await on it, indicating it's a promise. – Kevin B Sep 02 '21 at 00:17
  • weird, in another project with the same `build.js` it directly returns the HTML content. – AGamePlayer Sep 02 '21 at 00:17
  • 1
    You are correct, that changed "recently", see this readme from before the change 2 months ago: https://github.com/terser/html-minifier-terser/blame/0204d510e77f9a7fe6cd360549fbefa8dc754307/README.md – Kevin B Sep 02 '21 at 00:22

2 Answers2

1

Maybe it's an asynchronous function, and you need to do

var result = await minify(pug_html, {
    removeAttributeQuotes: true,
    minifyJS:true,
    minifyCSS:true,
    removeComments:true,
    collapseWhitespace:true,
    collapseInlineTagWhitespace:true
  });

with the await keyword, which makes it "wait" for the response from the function

Eisverygoodletter
  • 164
  • 1
  • 12
  • Thanks but it doesn't work. Please see my updates in the original post. – AGamePlayer Sep 02 '21 at 00:24
  • 1
    it fails because await can only be used in an async function, so you'd' have to make the function that code is in async by prepending the function declaration line with `async`. for example, `async function foo () {...}` – Kevin B Sep 02 '21 at 00:26
  • 1
    Sorry, the function name needs to be changed to `async function buildUI` – Eisverygoodletter Sep 02 '21 at 00:41
  • 1
    Or you can just use `result.then( (actualResult) => { _____ }); `, where `result` is a promise, and `actualResult` is the actual result used in the promise's callback function (or the function that the promise calls after it's finished) – Eisverygoodletter Sep 02 '21 at 00:44
0

See this link to learn more about promises. Essentially, you must wait for minifyJS to return the HTML by waiting for it (using .then((arg)=>{}). Also see the bottom of this readme

  minify(pug_html, {
    removeAttributeQuotes: true,
    minifyJS:true,
    minifyCSS:true,
    removeComments:true,
    collapseWhitespace:true,
    collapseInlineTagWhitespace:true
  }).then((res) => {result = res});
HagenSR
  • 11
  • 3