From 9340d9068e3d475511efeadc1bf20b49fb0400b0 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 9 May 2019 20:19:15 -0700 Subject: [PATCH] Hash demo files in index.html (#3185) --- build-scripts/gulp/app.js | 4 +- build-scripts/gulp/demo.js | 10 ++- build-scripts/gulp/entry-html.js | 63 +++++++++++++++++-- build-scripts/paths.js | 2 +- build-scripts/webpack.js | 18 +++--- demo/script/gen-icons.js | 15 ----- .../html/index.html.template} | 36 ++--------- 7 files changed, 84 insertions(+), 64 deletions(-) delete mode 100755 demo/script/gen-icons.js rename demo/{public/index.html => src/html/index.html.template} (77%) diff --git a/build-scripts/gulp/app.js b/build-scripts/gulp/app.js index 0536b14a30..37aad5fe34 100644 --- a/build-scripts/gulp/app.js +++ b/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" ) ) diff --git a/build-scripts/gulp/demo.js b/build-scripts/gulp/demo.js index cbe23e326c..b2d40e17ae 100644 --- a/build-scripts/gulp/demo.js +++ b/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" ) ); diff --git a/build-scripts/gulp/entry-html.js b/build-scripts/gulp/entry-html.js index 235a7336d5..eb26093925 100644 --- a/build-scripts/gulp/entry-html.js +++ b/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(); +}); diff --git a/build-scripts/paths.js b/build-scripts/paths.js index f078c80da9..356a3fa38a 100644 --- a/build-scripts/paths.js +++ b/build-scripts/paths.js @@ -13,5 +13,5 @@ module.exports = { demo_root: path.resolve(__dirname, "../demo/dist"), demo_static: path.resolve(__dirname, "../demo/dist/static"), demo_output: path.resolve(__dirname, "../demo/dist/frontend_latest"), - demo_output_es5: path.resolve(__dirname, "../demo/frontend_es5"), + demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"), }; diff --git a/build-scripts/webpack.js b/build-scripts/webpack.js index a29e6ec85a..7ff8a260dd 100644 --- a/build-scripts/webpack.js +++ b/build-scripts/webpack.js @@ -20,6 +20,12 @@ version = version[0]; const genMode = (isProdBuild) => (isProdBuild ? "production" : "development"); const genDevTool = (isProdBuild) => isProdBuild ? "cheap-source-map" : "inline-cheap-module-source-map"; +const genFilename = (isProdBuild, dontHash = new Set()) => ({ chunk }) => { + if (!isProdBuild || dontHash.has(chunk.name)) { + return `${chunk.name}.js`; + } + return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`; +}; const genChunkFilename = (isProdBuild, isStatsBuild) => isProdBuild && !isStatsBuild ? "chunk.[chunkhash].js" : "[name].chunk.js"; @@ -158,14 +164,7 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => { }), ].filter(Boolean), output: { - filename: ({ chunk }) => { - const dontHash = new Set([ - // Files who'se names should not be hashed. - // We currently have none. - ]); - if (!isProdBuild || dontHash.has(chunk.name)) return `${chunk.name}.js`; - return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`; - }, + filename: genFilename(isProdBuild), chunkFilename: genChunkFilename(isProdBuild, isStatsBuild), path: latestBuild ? paths.output : paths.output_es5, publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/", @@ -187,6 +186,7 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => { }, optimization: optimization(latestBuild), plugins: [ + new ManifestPlugin(), new webpack.DefinePlugin({ __DEV__: !isProdBuild, __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"), @@ -201,7 +201,7 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => { ].filter(Boolean), resolve, output: { - filename: "[name].js", + filename: genFilename(isProdBuild), chunkFilename: genChunkFilename(isProdBuild, isStatsBuild), path: path.resolve( paths.demo_root, diff --git a/demo/script/gen-icons.js b/demo/script/gen-icons.js deleted file mode 100755 index b3c20a842a..0000000000 --- a/demo/script/gen-icons.js +++ /dev/null @@ -1,15 +0,0 @@ -#!/usr/bin/env node -const fs = require("fs"); -const { - findIcons, - generateIconset, - genMDIIcons, -} = require("../../build-scripts/gulp/gen-icons.js"); - -function genHademoIcons() { - const iconNames = findIcons("./src", "hademo"); - fs.writeFileSync("./hademo-icons.html", generateIconset("hademo", iconNames)); -} - -genMDIIcons(); -genHademoIcons(); diff --git a/demo/public/index.html b/demo/src/html/index.html.template similarity index 77% rename from demo/public/index.html rename to demo/src/html/index.html.template index 4878fe8d43..75d35675d0 100644 --- a/demo/public/index.html +++ b/demo/src/html/index.html.template @@ -95,43 +95,17 @@
- + <%= renderTemplate('_js_base') %> - +