3

HTMLMinifier (html-minifier) (3.5.14) for Node.js (v8.11.1), installed with npm install html-minifier -g, can be run via command line (Windows CMD), e.g. html-minifier --help produces the usage info (excerpts):

  Usage: html-minifier [options] [files...]

  Options:

    -V, --version                        output the version number

...

    --minify-js [value]                  Minify Javascript in script elements and on* attributes (uses uglify-js)

...

    -c --config-file <file>              Use config file
    --input-dir <dir>                    Specify an input directory
    --output-dir <dir>                   Specify an output directory
    --file-ext <text>                    Specify an extension to be read, ex: html
    -h, --help                           output usage information

The option --minify-js [value] relies on UglifyJS to "compress" the JavaScript embedded inside the HTML file(s) passed to html-minifier. UglifyJS can remove console.log() function calls (Can uglify-js remove the console.log statements?) from the JavaScript, by enabling the drop_console option (also see pure_funcs).

But --minify-js drop_console=true does not have an effect, nor does something like "uglify:{options:{compress:{drop_console:true}}}" or "compress:{pure_funcs:['console.log']}".

How can such an option be set, ideally via the html-minifier command line (alternatively by config-file, though it just sets "minifyJS": true)?

handle
  • 5,063
  • 2
  • 40
  • 69
  • 2020: see https://github.com/DanielRuf/html-minifier-terser which is using https://github.com/terser/terser ("uglify-es is no longer maintained and uglify-js does not support ES6+. terser is a fork of uglify-es that mostly retains API and CLI compatibility with uglify-es and uglify-js@3") – handle Mar 01 '20 at 18:39
  • `--decode-entity-characters` now is `--decode-entities` and `--html5` is "unknown", yet enabled by default. – handle Mar 02 '20 at 12:13

2 Answers2

4

I was very close.

I started digging through the code (installed in %appdata%\npm\node_modules\html-minifier) to see what happens with the options provided, i.e. adding debug output with console.log(xyz); (using an actual debugger probably would be a better idea).

So, here's my "trace":

where finally in line https://github.com/kangax/html-minifier/blob/gh-pages/src/htmlminifier.js#L667 options.minifyJS is handled, before it's run as var result = UglifyJS.minify(code, minifyJS); in https://github.com/kangax/html-minifier/blob/gh-pages/src/htmlminifier.js#L680.

But there our option string compress:{pure_funcs:['console.log']} gets cleaned because it's not yet an object, resulting in {}.

Or, in a different trial with a different string you may encounter the error Could not parse JSON value '{compress:{pure_funcs:'console.log']}}'

At least it gets that far! But why doesn't it work?

First, it's a good time to revisit the JSON spec: https://www.json.org/index.html

Second, see if the string could be parsed as valid JSON, e.g. with the JSON.parse() demo at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

Third, figure out how to get that string through the CMD as argument (escaping the double quotes).

Finally, make sure the data structure to configure UgliFyJS is correct. That's quite easy, since it's documented: https://github.com/mishoo/UglifyJS2#minify-options-structure

And behold, simply escaping the double quotes with a backslash works for me:

html-minfier ... --minify-js {\"compress\":{\"pure_funcs\":[\"console.log\"]}} ...

and it properly shows up in the options as 

...
{ compress:
   { pure_funcs: [ 'console.log' ],
...
handle
  • 5,063
  • 2
  • 40
  • 69
  • This only works for logs which contain a string e.g `console.log("foo")`. Variables inside the `console.log` are not removed even though the `console.log` is removed. Example `console.log(arg)` becomes `arg`. – turrican_34 Apr 08 '19 at 11:10
  • The options have changed with html-minifier-terser and terser and seem to break the code. `--minify-js {\"compress\":{\"drop_console\":\"true\"}} ^` seems to work, but have a look yourself at https://github.com/webpack-contrib/terser-webpack-plugin/issues/57 (seems to contain useful tips at first glance). – handle Mar 07 '20 at 16:29
-2

For ex. curl can read config from a file, like proxies, etc... Many programs do so. git, maven, gradle.... No matter how and where you call them, they look for the config you or the system provides: first from the current directory, then from the user home and then the system /etc/...

If no batteries included with these node packages, they can only be used on separate html and js files.

megasega
  • 17
  • 2