diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index dfd7e12fd4..b7517720bc 100644
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -62,7 +62,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
...defineOverlay,
});
-const htmlMinifierOptions = {
+module.exports.htmlMinifierOptions = {
caseSensitive: true,
collapseWhitespace: true,
conservativeCollapse: true,
@@ -70,7 +70,12 @@ const htmlMinifierOptions = {
removeComments: true,
removeRedundantAttributes: true,
minifyCSS: {
- level: 0,
+ level: {
+ 1: {
+ all: false,
+ removeWhitespace: true,
+ },
+ },
},
};
@@ -135,7 +140,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
"@polymer/polymer/lib/utils/html-tag": ["html"],
},
strictCSS: true,
- htmlMinifier: htmlMinifierOptions,
+ htmlMinifier: module.exports.htmlMinifierOptions,
failOnError: true, // we can turn this off in case of false positives
},
],
diff --git a/build-scripts/gulp/entry-html.js b/build-scripts/gulp/entry-html.js
index 701e617627..14ead700c9 100644
--- a/build-scripts/gulp/entry-html.js
+++ b/build-scripts/gulp/entry-html.js
@@ -3,9 +3,10 @@ const gulp = require("gulp");
const fs = require("fs-extra");
const path = require("path");
const template = require("lodash.template");
-const minify = require("html-minifier").minify;
+const { minify } = require("html-minifier-terser");
const paths = require("../paths.js");
const env = require("../env.js");
+const { htmlMinifierOptions, terserOptions } = require("../bundle.js");
const templatePath = (tpl) =>
path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
@@ -39,10 +40,12 @@ const renderGalleryTemplate = (pth, data = {}) =>
const minifyHtml = (content) =>
minify(content, {
- collapseWhitespace: true,
- minifyJS: true,
- minifyCSS: true,
- removeComments: true,
+ ...htmlMinifierOptions,
+ conservativeCollapse: false,
+ minifyJS: terserOptions({
+ latestBuild: false, // Shared scripts should be ES5
+ isTestBuild: true, // Don't need source maps
+ }),
});
const PAGES = ["onboarding", "authorize"];
@@ -63,7 +66,7 @@ gulp.task("gen-pages-dev", (done) => {
done();
});
-gulp.task("gen-pages-prod", (done) => {
+gulp.task("gen-pages-prod", async () => {
const latestManifest = require(path.resolve(
paths.app_output_latest,
"manifest.json"
@@ -73,19 +76,23 @@ gulp.task("gen-pages-prod", (done) => {
"manifest.json"
));
+ const minifiedHTML = [];
for (const page of PAGES) {
const content = renderTemplate(page, {
latestPageJS: latestManifest[`${page}.js`],
-
es5PageJS: es5Manifest[`${page}.js`],
});
- fs.outputFileSync(
- path.resolve(paths.app_output_root, `${page}.html`),
- minifyHtml(content)
+ minifiedHTML.push(
+ minifyHtml(content).then((minified) =>
+ fs.outputFileSync(
+ path.resolve(paths.app_output_root, `${page}.html`),
+ minified
+ )
+ )
);
}
- done();
+ await Promise.all(minifiedHTML);
});
gulp.task("gen-index-app-dev", (done) => {
@@ -118,7 +125,7 @@ gulp.task("gen-index-app-dev", (done) => {
done();
});
-gulp.task("gen-index-app-prod", (done) => {
+gulp.task("gen-index-app-prod", async () => {
const latestManifest = require(path.resolve(
paths.app_output_latest,
"manifest.json"
@@ -136,13 +143,15 @@ gulp.task("gen-index-app-prod", (done) => {
es5CoreJS: es5Manifest["core.js"],
es5CustomPanelJS: es5Manifest["custom-panel.js"],
});
- const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+ const minified = (await minifyHtml(content)).replace(
+ /#THEMEC/g,
+ "{{ theme_color }}"
+ );
fs.outputFileSync(
path.resolve(paths.app_output_root, "index.html"),
minified
);
- done();
});
gulp.task("gen-index-cast-dev", (done) => {
@@ -244,7 +253,7 @@ gulp.task("gen-index-demo-dev", (done) => {
done();
});
-gulp.task("gen-index-demo-prod", (done) => {
+gulp.task("gen-index-demo-prod", async () => {
const latestManifest = require(path.resolve(
paths.demo_output_latest,
"manifest.json"
@@ -258,13 +267,12 @@ gulp.task("gen-index-demo-prod", (done) => {
es5DemoJS: es5Manifest["main.js"],
});
- const minified = minifyHtml(content);
+ const minified = await minifyHtml(content);
fs.outputFileSync(
path.resolve(paths.demo_output_root, "index.html"),
minified
);
- done();
});
gulp.task("gen-index-gallery-dev", (done) => {
@@ -279,7 +287,7 @@ gulp.task("gen-index-gallery-dev", (done) => {
done();
});
-gulp.task("gen-index-gallery-prod", (done) => {
+gulp.task("gen-index-gallery-prod", async () => {
const latestManifest = require(path.resolve(
paths.gallery_output_latest,
"manifest.json"
@@ -287,13 +295,12 @@ gulp.task("gen-index-gallery-prod", (done) => {
const content = renderGalleryTemplate("index", {
latestGalleryJS: latestManifest["entrypoint.js"],
});
- const minified = minifyHtml(content);
+ const minified = await minifyHtml(content);
fs.outputFileSync(
path.resolve(paths.gallery_output_root, "index.html"),
minified
);
- done();
});
gulp.task("gen-index-hassio-dev", async () => {
diff --git a/package.json b/package.json
index 1a0466a12f..485c04025c 100644
--- a/package.json
+++ b/package.json
@@ -172,6 +172,7 @@
"@types/chromecast-caf-sender": "1.0.5",
"@types/esprima": "4.0.3",
"@types/glob": "8.1.0",
+ "@types/html-minifier-terser": "7.0.0",
"@types/js-yaml": "4.0.5",
"@types/leaflet": "1.9.3",
"@types/leaflet-draw": "1.0.6",
@@ -211,7 +212,7 @@
"gulp-merge-json": "2.1.2",
"gulp-rename": "2.0.0",
"gulp-zopfli-green": "6.0.1",
- "html-minifier": "4.0.0",
+ "html-minifier-terser": "7.1.0",
"husky": "8.0.3",
"instant-mocha": "1.5.0",
"jszip": "3.10.1",
diff --git a/src/html/index.html.template b/src/html/index.html.template
index 56bc8860a0..d69742908f 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -102,9 +102,9 @@
}