Here is what the minified html file should look like: Within that folder should be the minified version of the index.html file initially created. As a result a new folder called "dist" should have been created where the src folder is located. Now that the html-minify script is added and the options are configured, to use it run the command npm run html-minify. With the package installed globally, running the command html-minifier -help will list all of the command line options, their value if applicable, and a short help text description.
Npm minify install#
To get a full list of all the options supported, it can be helpful to globally install the html-minifier package by running the command npm install html-minifier -g (this may require administrator access). It may also be good to know that the html-minifier options information states that clean-css and uglify-js are used for the minification when these options are included. If comments need to be retained or white space non-collapsed, these options can be deleted and html-minifier will not alter these properties of the original file.ĭepending on whether set to true or false (or not included as the default value is false), the last two options, -minify-js and -minify-css will minify the corresponding source of their type, only if included as inline style or script tags in the html being minified. The next two options: -remove-comments and -collapse-whitespace do exactly as they are named, and there is no value to pass to them. Additionally there are many other minifier packages available on npm and one of those may be better suited for file types other than html.
A possible workaround for the time being is to add multiple package.json scripts, with each one running a separate command for each of the individual file types that will be minified. In the html-minifier github repository there is open issue to support multiple file extensions. The -file-ext option is set to html (in this example it is not needed), however if the input directory contains file types other than "html", errors may occur as a result of the attempted minification of those files. In this case it is set to "dist", although this can be changed to any folder name. Following that, -output-dir is specifying the output directory where the minified html file will be added. In this case the folder name is "src", which was created during the initial step. The first option -input-dir is specifying the folder that our source html file is located. Let's look at each of the options being passed in to the html-minifier cli, and see what each is specifying. "html-minify": "html-minifier -input-dir src -output-dir dist -file-ext html -remove-comments -collapse-whitespace -minify-js true -minify-css true " Your package.json file should look similar to this: Once the package.json file is in place we can run the command npm install html-minifier -save-dev to install the html-minifier npm package. If one is not already created, running the command npm init and following the prompts will create one. Next we will want to set up the package.json file so that we can npm install the html-minifier package. The steps in that article can be extended to create a static site generator, and the html-minifier package can be included and used as part of the build process.
Npm minify how to#
If you are interested in seeing an example of how to generate HTML output, here is some info on how to render EJS files with Node.js. Note: A more common scenario than starting with a sample file might be applying the minification step to the output of a build process. There is more than one line in this text block.Ĭonsole.log("code block inside preformatted block.") some more text at the bottom This is our sample html content Here is some paragraph text. For this example, the sample file contains different types of elements to highlight the effect of minification, especially in regard to how white space is maintained when using preformatted elements. The name of the file and containing folder will be needed in the following steps. We can name this file index.html, and save it to a folder called "src". To demonstrate the features provided by the html-minifier package we will start out with a sample html file. In this case, and especially when serving lots of content, minifying the HTML output can result in cost savings as well as performance improvements.īefore following the steps below make sure to have Node.js and npm installed.
Npm minify generator#
One example of this scenario could be a site that uses a static site generator to output prerendered HTML files at build time. This can be useful when working with a site built with the Jamstack.
The html-minifier npm package provides a command line interface that makes it possible to minify HTML.
0 kommentar(er)
