Gulpify build pipeline (#3145)

* Gulpify build pipeline

* Update build frontend script

* Fixes

* Limit service worker to latest build

* Use shorthand

* Fix hassio build

build-scripts/gulp/entry-html.js

@@ -0,0 +1,108 @@
+// Tasks to generate entry HTML
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+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 config = require("../paths.js");
+
+const templatePath = (tpl) =>
+  path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
+
+const readFile = (pth) => fs.readFileSync(pth).toString();
+
+const renderTemplate = (pth, data = {}) => {
+  const compiled = template(readFile(templatePath(pth)));
+  return compiled({ ...data, renderTemplate });
+};
+
+const minifyHtml = (content) =>
+  minify(content, {
+    collapseWhitespace: true,
+    minifyJS: true,
+    minifyCSS: true,
+    removeComments: true,
+  });
+
+const PAGES = ["onboarding", "authorize"];
+
+gulp.task("gen-pages-dev", (done) => {
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: `/frontend_latest/${page}.js`,
+      latestHassIconsJS: "/frontend_latest/hass-icons.js",
+
+      es5Compatibility: "/frontend_es5/compatibility.js",
+      es5PageJS: `/frontend_es5/${page}.js`,
+      es5HassIconsJS: "/frontend_es5/hass-icons.js",
+    });
+
+    fs.outputFileSync(path.resolve(config.root, `${page}.html`), content);
+  }
+  done();
+});
+
+gulp.task("gen-pages-prod", (done) => {
+  const latestManifest = require(path.resolve(config.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: latestManifest[`${page}.js`],
+      latestHassIconsJS: latestManifest["hass-icons.js"],
+
+      es5Compatibility: es5Manifest["compatibility.js"],
+      es5PageJS: es5Manifest[`${page}.js`],
+      es5HassIconsJS: es5Manifest["hass-icons.js"],
+    });
+
+    fs.outputFileSync(
+      path.resolve(config.root, `${page}.html`),
+      minifyHtml(content)
+    );
+  }
+  done();
+});
+
+gulp.task("gen-index-html-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderTemplate("index", {
+    latestAppJS: "/frontend_latest/app.js",
+    latestCoreJS: "/frontend_latest/core.js",
+    latestCustomPanelJS: "/frontend_latest/custom-panel.js",
+    latestHassIconsJS: "/frontend_latest/hass-icons.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5AppJS: "/frontend_es5/app.js",
+    es5CoreJS: "/frontend_es5/core.js",
+    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
+    es5HassIconsJS: "/frontend_es5/hass-icons.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-html-prod", (done) => {
+  const latestManifest = require(path.resolve(config.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+  const content = renderTemplate("index", {
+    latestAppJS: latestManifest["app.js"],
+    latestCoreJS: latestManifest["core.js"],
+    latestCustomPanelJS: latestManifest["custom-panel.js"],
+    latestHassIconsJS: latestManifest["hass-icons.js"],
+
+    es5Compatibility: es5Manifest["compatibility.js"],
+    es5AppJS: es5Manifest["app.js"],
+    es5CoreJS: es5Manifest["core.js"],
+    es5CustomPanelJS: es5Manifest["custom-panel.js"],
+    es5HassIconsJS: es5Manifest["hass-icons.js"],
+  });
+  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.root, "index.html"), minified);
+  done();
+});