Refactor Webpack build scripts

.travis.yml

@@ -8,19 +8,20 @@ install: yarn install
 script:
   - npm run build
   - hassio/script/build_hassio
+  # Because else eslint fails because hassio has cleaned that build
+  - ./node_modules/.bin/gulp gen-icons-app
   - npm run test
   # - xvfb-run wct --module-resolution=node --npm
   # - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --plugin sauce; fi'
 services:
   - docker
 before_deploy:
-  - 'docker pull lokalise/lokalise-cli@sha256:2198814ebddfda56ee041a4b427521757dd57f75415ea9693696a64c550cef21'
+  - "docker pull lokalise/lokalise-cli@sha256:2198814ebddfda56ee041a4b427521757dd57f75415ea9693696a64c550cef21"
 deploy:
   provider: script
   script: script/travis_deploy
-  'on':
+  "on":
     branch: master
 dist: trusty
 addons:
   sauce_connect: true
-

build-scripts/env.js

@@ -0,0 +1,6 @@
+module.exports = {
+  isProdBuild: process.env.NODE_ENV === "production",
+  isStatsBuild: process.env.STATS === "1",
+  isTravis: process.env.TRAVIS === "true",
+  isNetlify: process.env.NETLIFY === "true",
+};

build-scripts/gulp/app.js

@@ -1,6 +1,8 @@
 // Run HA develop mode
 const gulp = require("gulp");
 
+const envVars = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gen-icons.js");
@@ -19,7 +21,7 @@ gulp.task(
     "clean",
     gulp.parallel(
       "gen-service-worker-dev",
-      "gen-icons",
+      gulp.parallel("gen-icons-app", "gen-icons-mdi"),
       "gen-pages-dev",
       "gen-index-app-dev",
       gulp.series("create-test-translation", "build-translations")
@@ -36,10 +38,11 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
     "copy-static",
     "webpack-prod-app",
-    ...(process.env.CI === "true" ? [] : ["compress-app"]),
+    ...// Don't compress running tests
+    (envVars.isTravis ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/cast.js

@@ -1,4 +1,3 @@
-// Run cast develop mode
 const gulp = require("gulp");
 
 require("./clean.js");
@@ -16,7 +15,12 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-cast",
-    gulp.parallel("gen-icons", "gen-index-cast-dev", "build-translations"),
+    gulp.parallel(
+      "gen-icons-app",
+      "gen-icons-mdi",
+      "gen-index-cast-dev",
+      "build-translations"
+    ),
     "copy-static-cast",
     "webpack-dev-server-cast"
   )
@@ -29,7 +33,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-cast",
-    gulp.parallel("gen-icons", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
     "copy-static-cast",
     "webpack-prod-cast",
     "gen-index-cast-prod"

build-scripts/gulp/clean.js

@@ -9,15 +9,31 @@ gulp.task(
     return del([config.root, config.build_dir]);
   })
 );
+
 gulp.task(
   "clean-demo",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
     return del([config.demo_root, config.build_dir]);
   })
 );
+
 gulp.task(
   "clean-cast",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
     return del([config.cast_root, config.build_dir]);
   })
 );
+
+gulp.task(
+  "clean-hassio",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.hassio_root, config.build_dir]);
+  })
+);
+
+gulp.task(
+  "clean-gallery",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.gallery_root, config.build_dir]);
+  })
+);

build-scripts/gulp/compress.js

@@ -29,3 +29,10 @@ gulp.task("compress-app", function compressApp() {
 
   return merge(jsLatest, jsEs5, polyfills, translations);
 });
+
+gulp.task("compress-hassio", function compressApp() {
+  return gulp
+    .src(path.resolve(paths.hassio_root, "**/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(paths.hassio_root));
+});

build-scripts/gulp/demo.js

@@ -17,7 +17,8 @@ gulp.task(
     },
     "clean-demo",
     gulp.parallel(
-      "gen-icons",
+      "gen-icons-app",
+      "gen-icons-mdi",
       "gen-icons-demo",
       "gen-index-demo-dev",
       "build-translations"
@@ -34,7 +35,12 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-demo",
-    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    gulp.parallel(
+      "gen-icons-app",
+      "gen-icons-mdi",
+      "gen-icons-demo",
+      "build-translations"
+    ),
     "copy-static-demo",
     "webpack-prod-demo",
     "gen-index-demo-prod"

build-scripts/gulp/entry-html.js

@@ -11,12 +11,6 @@ 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 castTemplatePath = (tpl) =>
-  path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`);
-
 const readFile = (pth) => fs.readFileSync(pth).toString();
 
 const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
@@ -25,10 +19,19 @@ const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
 };
 
 const renderDemoTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, demoTemplatePath);
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`)
+  );
 
 const renderCastTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, castTemplatePath);
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`)
+  );
+
+const renderGalleryTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(config.gallery_dir, "src/html/", `${tpl}.html.template`)
+  );
 
 const minifyHtml = (content) =>
   minify(content, {
@@ -209,8 +212,33 @@ gulp.task("gen-index-demo-prod", (done) => {
     es5Compatibility: es5Manifest["compatibility.js"],
     es5DemoJS: es5Manifest["main.js"],
   });
-  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+  const minified = minifyHtml(content);
 
   fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
   done();
 });
+
+gulp.task("gen-index-gallery-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 = renderGalleryTemplate("index", {
+    latestGalleryJS: "./entrypoint.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-gallery-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    config.gallery_output,
+    "manifest.json"
+  ));
+  const content = renderGalleryTemplate("index", {
+    latestGalleryJS: latestManifest["entrypoint.js"],
+  });
+  const minified = minifyHtml(content);
+
+  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), minified);
+  done();
+});

build-scripts/gulp/gallery.js

@@ -0,0 +1,38 @@
+// Run demo develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-gallery",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-gallery",
+    gulp.parallel("gen-icons-app", "gen-icons-app", "build-translations"),
+    "copy-static-gallery",
+    "gen-index-gallery-dev",
+    "webpack-dev-server-gallery"
+  )
+);
+
+gulp.task(
+  "build-gallery",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-gallery",
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    "copy-static-gallery",
+    "webpack-prod-gallery",
+    "gen-index-gallery-prod"
+  )
+);

build-scripts/gulp/gather-static.js

@@ -111,3 +111,15 @@ gulp.task("copy-static-cast", (done) => {
   copyTranslations(paths.cast_static);
   done();
 });
+
+gulp.task("copy-static-gallery", (done) => {
+  // Copy app static files
+  fs.copySync(polyPath("public/static"), paths.gallery_static);
+  // Copy gallery static files
+  fs.copySync(path.resolve(paths.gallery_dir, "public"), paths.gallery_root);
+
+  copyMapPanel(paths.gallery_static);
+  copyFonts(paths.gallery_static);
+  copyTranslations(paths.gallery_static);
+  done();
+});

build-scripts/gulp/gen-icons.js

@@ -57,18 +57,6 @@ function generateIconset(iconsetName, iconNames) {
   return `<ha-iconset-svg name="${iconsetName}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
 }
 
-// Generate the full MDI iconset
-function genMDIIcons() {
-  const meta = JSON.parse(
-    fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
-  );
-  const iconNames = meta.map((iconInfo) => iconInfo.name);
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR);
-  }
-  fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
-}
-
 // Helper function to map recursively over files in a folder and it's subfolders
 function mapFiles(startPath, filter, mapFunc) {
   const files = fs.readdirSync(startPath);
@@ -101,24 +89,27 @@ function findIcons(searchPath, iconsetName) {
   return icons;
 }
 
-function genHassIcons() {
+gulp.task("gen-icons-mdi", (done) => {
+  const meta = JSON.parse(
+    fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
+  );
+  const iconNames = meta.map((iconInfo) => iconInfo.name);
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR);
+  }
+  fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
+  done();
+});
+
+gulp.task("gen-icons-app", (done) => {
   const iconNames = findIcons("./src", "hass");
   BUILT_IN_PANEL_ICONS.forEach((name) => iconNames.add(name));
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR);
   }
   fs.writeFileSync(HASS_OUTPUT_PATH, generateIconset("hass", iconNames));
-}
-
-gulp.task("gen-icons-mdi", (done) => {
-  genMDIIcons();
   done();
 });
-gulp.task("gen-icons-hass", (done) => {
-  genHassIcons();
-  done();
-});
-gulp.task("gen-icons", gulp.series("gen-icons-hass", "gen-icons-mdi"));
 
 gulp.task("gen-icons-demo", (done) => {
   const iconNames = findIcons(path.resolve(paths.demo_dir, "./src"), "hademo");
@@ -129,8 +120,21 @@ gulp.task("gen-icons-demo", (done) => {
   done();
 });
 
-module.exports = {
-  findIcons,
-  generateIconset,
-  genMDIIcons,
-};
+gulp.task("gen-icons-hassio", (done) => {
+  const iconNames = findIcons(
+    path.resolve(paths.hassio_dir, "./src"),
+    "hassio"
+  );
+  // Find hassio icons inside HA main repo.
+  for (const item of findIcons(
+    path.resolve(paths.polymer_dir, "./src"),
+    "hassio"
+  )) {
+    iconNames.add(item);
+  }
+  fs.writeFileSync(
+    path.resolve(paths.hassio_dir, "hassio-icons.html"),
+    generateIconset("hassio", iconNames)
+  );
+  done();
+});