Hash demo files in index.html (#3185)

build-scripts/gulp/app.js

@@ -20,7 +20,7 @@ gulp.task(
       "gen-service-worker-dev",
       "gen-icons",
       "gen-pages-dev",
-      "gen-index-html-dev",
+      "gen-index-app-dev",
       "build-translations"
     ),
     "copy-static",
@@ -44,7 +44,7 @@ gulp.task(
     ),
     gulp.parallel(
       "gen-pages-prod",
-      "gen-index-html-prod",
+      "gen-index-app-prod",
       "gen-service-worker-prod"
     )
   )

build-scripts/gulp/demo.js

@@ -16,7 +16,12 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-demo",
-    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    gulp.parallel(
+      "gen-icons",
+      "gen-icons-demo",
+      "gen-index-demo-dev",
+      "build-translations"
+    ),
     "copy-static-demo",
     "webpack-dev-server-demo"
   )
@@ -31,6 +36,7 @@ gulp.task(
     "clean-demo",
     gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
     "copy-static-demo",
-    "webpack-prod-demo"
+    "webpack-prod-demo",
+    "gen-index-demo-prod"
   )
 );

build-scripts/gulp/entry-html.js

@@ -11,13 +11,19 @@ const config = require("../paths.js");
 const templatePath = (tpl) =>
   path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
 
+const demoTemplatePath = (tpl) =>
+  path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`);
+
 const readFile = (pth) => fs.readFileSync(pth).toString();
 
-const renderTemplate = (pth, data = {}) => {
-  const compiled = template(readFile(templatePath(pth)));
+const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
+  const compiled = template(readFile(pathFunc(pth)));
   return compiled({ ...data, renderTemplate });
 };
 
+const renderDemoTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, demoTemplatePath);
+
 const minifyHtml = (content) =>
   minify(content, {
     collapseWhitespace: true,
@@ -66,7 +72,7 @@ gulp.task("gen-pages-prod", (done) => {
   done();
 });
 
-gulp.task("gen-index-html-dev", (done) => {
+gulp.task("gen-index-app-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", {
@@ -86,7 +92,7 @@ gulp.task("gen-index-html-dev", (done) => {
   done();
 });
 
-gulp.task("gen-index-html-prod", (done) => {
+gulp.task("gen-index-app-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", {
@@ -106,3 +112,52 @@ gulp.task("gen-index-html-prod", (done) => {
   fs.outputFileSync(path.resolve(config.root, "index.html"), minified);
   done();
 });
+
+gulp.task("gen-index-demo-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 = renderDemoTemplate("index", {
+    latestDemoJS: "/frontend_latest/main.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5DemoJS: "/frontend_es5/main.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-demo-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 = renderDemoTemplate("index", {
+    latestDemoJS: "/frontend_latest/main.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5DemoJS: "/frontend_es5/main.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-demo-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    config.demo_output,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    config.demo_output_es5,
+    "manifest.json"
+  ));
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: latestManifest["main.js"],
+
+    es5Compatibility: es5Manifest["compatibility.js"],
+    es5DemoJS: es5Manifest["main.js"],
+  });
+  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
+  done();
+});