Migrate demo to gulp (#3152)

* Migrate demo to gulp

* Tweak demo migration to gulp

* Feature detect demo

* Gen icons

build-scripts/gulp/app.js

@@ -10,18 +10,34 @@ require("./service-worker.js");
 require("./entry-html.js");
 
 gulp.task(
-  "build-release",
+  "develop-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean",
+    gulp.parallel(
+      "gen-service-worker-dev",
+      "gen-icons",
+      "gen-pages-dev",
+      "gen-index-html-dev",
+      "build-translations"
+    ),
+    "copy-static",
+    "webpack-watch-app"
+  )
+);
+
+gulp.task(
+  "build-app",
   gulp.series(
     async function setEnv() {
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel(
-      "copy-static",
-      "gen-icons",
-      gulp.series("build-translations", "copy-translations")
-    ),
-    gulp.parallel("webpack-prod", "compress-static"),
+    gulp.parallel("gen-icons", "build-translations"),
+    "copy-static",
+    gulp.parallel("webpack-prod-app", "compress-static"),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-html-prod",

build-scripts/gulp/clean.js

@@ -3,3 +3,4 @@ const gulp = require("gulp");
 const config = require("../paths");
 
 gulp.task("clean", () => del([config.root, config.build_dir]));
+gulp.task("clean-demo", () => del([config.demo_root, config.build_dir]));

build-scripts/gulp/demo.js

@@ -0,0 +1,36 @@
+// Run HA 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-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-demo",
+    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    "copy-static-demo",
+    "webpack-dev-server-demo"
+  )
+);
+
+gulp.task(
+  "build-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-demo",
+    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    "copy-static-demo",
+    "webpack-prod-demo"
+  )
+);

build-scripts/gulp/develop.js

@@ -1,29 +0,0 @@
-// Run HA 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",
-  gulp.series(
-    async function setEnv() {
-      process.env.NODE_ENV = "development";
-    },
-    "clean",
-    gulp.parallel(
-      "copy-static",
-      "gen-service-worker-dev",
-      "gen-icons",
-      "gen-pages-dev",
-      "gen-index-html-dev",
-      gulp.series("build-translations", "copy-translations")
-    ),
-    "webpack-watch"
-  )
-);

build-scripts/gulp/gather-static.js

@@ -5,17 +5,21 @@ const path = require("path");
 const fs = require("fs-extra");
 const zopfli = require("gulp-zopfli-green");
 const merge = require("merge-stream");
-const config = require("../paths");
+const paths = require("../paths");
 
 const npmPath = (...parts) =>
-  path.resolve(config.polymer_dir, "node_modules", ...parts);
-const polyPath = (...parts) => path.resolve(config.polymer_dir, ...parts);
-const staticPath = (...parts) => path.resolve(config.root, "static", ...parts);
+  path.resolve(paths.polymer_dir, "node_modules", ...parts);
+const polyPath = (...parts) => path.resolve(paths.polymer_dir, ...parts);
 
 const copyFileDir = (fromFile, toDir) =>
   fs.copySync(fromFile, path.join(toDir, path.basename(fromFile)));
 
-function copyTranslations() {
+const genStaticPath = (staticDir) => (...parts) =>
+  path.resolve(staticDir, ...parts);
+
+function copyTranslations(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
   // Translation output
   fs.copySync(
     polyPath("build-translations/output"),
@@ -23,9 +27,8 @@ function copyTranslations() {
   );
 }
 
-function copyStatic() {
-  // Basic static files
-  fs.copySync(polyPath("public"), config.root);
+function copyPolyfills(staticDir) {
+  const staticPath = genStaticPath(staticDir);
 
   // Web Component polyfills and adapters
   copyFileDir(
@@ -40,31 +43,16 @@ function copyStatic() {
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
     staticPath("polyfills/")
   );
-
-  // Local fonts
-  fs.copySync(npmPath("@polymer/font-roboto-local/fonts"), staticPath("fonts"));
-
-  // External dependency assets
-  copyFileDir(
-    npmPath("react-big-calendar/lib/css/react-big-calendar.css"),
-    staticPath("panels/calendar/")
-  );
-  copyFileDir(
-    npmPath("leaflet/dist/leaflet.css"),
-    staticPath("images/leaflet/")
-  );
-  fs.copySync(
-    npmPath("leaflet/dist/images"),
-    staticPath("images/leaflet/images/")
-  );
 }
 
-gulp.task("copy-static", (done) => {
-  copyStatic();
-  done();
-});
+function copyFonts(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  // Local fonts
+  fs.copySync(npmPath("@polymer/font-roboto-local/fonts"), staticPath("fonts"));
+}
 
-gulp.task("compress-static", () => {
+function compressStatic(staticDir) {
+  const staticPath = genStaticPath(staticDir);
   const fonts = gulp
     .src(staticPath("fonts/**/*.ttf"))
     .pipe(zopfli())
@@ -79,9 +67,44 @@ gulp.task("compress-static", () => {
     .pipe(gulp.dest(staticPath("translations")));
 
   return merge(fonts, polyfills, translations);
-});
+}
 
-gulp.task("copy-translations", (done) => {
-  copyTranslations();
+gulp.task("copy-static", (done) => {
+  const staticDir = paths.static;
+  const staticPath = genStaticPath(paths.static);
+  // Basic static files
+  fs.copySync(polyPath("public"), paths.root);
+
+  copyPolyfills(staticDir);
+  copyFonts(staticDir);
+  copyTranslations(staticDir);
+
+  // Panel assets
+  copyFileDir(
+    npmPath("react-big-calendar/lib/css/react-big-calendar.css"),
+    staticPath("panels/calendar/")
+  );
+  copyFileDir(
+    npmPath("leaflet/dist/leaflet.css"),
+    staticPath("images/leaflet/")
+  );
+  fs.copySync(
+    npmPath("leaflet/dist/images"),
+    staticPath("images/leaflet/images/")
+  );
+  done();
+});
+
+gulp.task("compress-static", () => compressStatic(paths.root));
+
+gulp.task("copy-static-demo", (done) => {
+  // Copy app static files
+  fs.copySync(polyPath("public"), paths.demo_root);
+  // Copy demo static files
+  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
+
+  copyPolyfills(paths.demo_static);
+  copyFonts(paths.demo_static);
+  copyTranslations(paths.demo_static);
   done();
 });

build-scripts/gulp/gen-icons.js

@@ -1,6 +1,7 @@
 const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs");
+const paths = require("../paths");
 
 const ICON_PACKAGE_PATH = path.resolve(
   __dirname,
@@ -118,6 +119,15 @@ gulp.task("gen-icons-hass", (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");
+  fs.writeFileSync(
+    path.resolve(paths.demo_dir, "hademo-icons.html"),
+    generateIconset("hademo", iconNames)
+  );
+  done();
+});
+
 module.exports = {
   findIcons,
   generateIconset,

build-scripts/gulp/webpack.js

@@ -1,7 +1,11 @@
 // Tasks to run webpack.
 const gulp = require("gulp");
+const path = require("path");
 const webpack = require("webpack");
-const { createAppConfig } = require("../webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const log = require("fancy-log");
+const paths = require("../paths");
+const { createAppConfig, createDemoConfig } = require("../webpack");
 
 const handler = (done) => (err, stats) => {
   if (err) {
@@ -12,7 +16,7 @@ const handler = (done) => (err, stats) => {
     return;
   }
 
-  console.log(`Build done @ ${new Date().toLocaleTimeString()}`);
+  log(`Build done @ ${new Date().toLocaleTimeString()}`);
 
   if (stats.hasErrors() || stats.hasWarnings()) {
     console.log(stats.toString("minimal"));
@@ -23,7 +27,7 @@ const handler = (done) => (err, stats) => {
   }
 };
 
-gulp.task("webpack-watch", () => {
+gulp.task("webpack-watch-app", () => {
   const compiler = webpack([
     createAppConfig({
       isProdBuild: false,
@@ -41,7 +45,7 @@ gulp.task("webpack-watch", () => {
 });
 
 gulp.task(
-  "webpack-prod",
+  "webpack-prod-app",
   () =>
     new Promise((resolve) =>
       webpack(
@@ -61,3 +65,52 @@ gulp.task(
       )
     )
 );
+
+gulp.task("webpack-dev-server-demo", () => {
+  const compiler = webpack([
+    createDemoConfig({
+      isProdBuild: false,
+      latestBuild: false,
+      isStatsBuild: false,
+    }),
+    createDemoConfig({
+      isProdBuild: false,
+      latestBuild: true,
+      isStatsBuild: false,
+    }),
+  ]);
+
+  new WebpackDevServer(compiler, {
+    open: true,
+    watchContentBase: true,
+    contentBase: path.resolve(paths.demo_dir, "dist"),
+  }).listen(8080, "localhost", function(err) {
+    if (err) {
+      throw err;
+    }
+    // Server listening
+    log("[webpack-dev-server]", "http://localhost:8080");
+  });
+});
+
+gulp.task(
+  "webpack-prod-demo",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        [
+          createDemoConfig({
+            isProdBuild: true,
+            latestBuild: false,
+            isStatsBuild: false,
+          }),
+          createDemoConfig({
+            isProdBuild: true,
+            latestBuild: true,
+            isStatsBuild: false,
+          }),
+        ],
+        handler(resolve)
+      )
+    )
+);