esbuild plugin to minify html files
- Using HTMLMinifier
- Minify HTML files output by other plugins such as
@craftamap/esbuild-plugin-htmlandesbuild-plugin-copy.
npm i -D html-minifier-terser
npm i -D esbuild-plugin-html-minifier-terserType: string | string[]
Default: '**/*.html'
Glob patterns of files to be minified.
Type: 'outdir' | 'workingDir'
Default: 'outdir'
Base directory for include option.
Type: import('html-minifier-terser').Options
Default:
{
caseSensitive: true,
collapseWhitespace: true,
keepClosingSlash: true,
minifyCSS: true,
minifyJS: true,
removeComments: true,
}HTMLMinifier options.
Not merged with the default minifierOptions object.
By default, include is '**/*.html' and baseDir is 'outdir', so all files with .html extension output in the dist directory will be minified.
// build.js
import esbuild from 'esbuild';
import { htmlPlugin } from '@craftamap/esbuild-plugin-html';
import htmlMinifierPlugin from 'esbuild-plugin-html-minifier-terser';
esbuild.build({
entryPoints: ['src/main.js'],
outdir: 'dist',
metafile: true,
plugins: [
htmlPlugin({
files: [
{
entryPoints: ['src/main.js'],
filename: 'index.html',
},
],
}),
htmlMinifierPlugin(),
],
});./
src/
main.js
dist/
main.js
index.html (will be minified)
build.js
To minify only specific files, set the glob pattern to include. If you need to minify files that are not in outdir, set baseDir to 'workingDir'.
// build.js
import esbuild from 'esbuild';
import htmlMinifierPlugin from 'esbuild-plugin-html-minifier-terser';
esbuild.build({
plugins: [
htmlMinifierPlugin({
include: 'public/main.html',
baseDir: 'workingDir',
}),
],
});./
public/
main.html (will be minified)
sub.html
build.js
Customized minifierOptions will NOT be merged with the default object.
import esbuild from 'esbuild';
import htmlMinifierPlugin from 'esbuild-plugin-html-minifier-terser';
esbuild.build({
...
plugins: [
htmlMinifierPlugin({
minifierOptions: {
collapseWhitespace: true,
useShortDoctype: true,
},
}),
],
});