build: script to build demo-app for firebase (#4330)

* build: script to build demo-app for firebase

* Adds a new gulp task that can be used to build the devapp in "deploy"-mode. This allows us to deploy the demo-app on firebase.

Fixes #3857

* Add firebase deploy task

Author: devversion

firebase.json

@@ -3,7 +3,7 @@
     "source": "tools/screenshot-test/functions"
   },
   "hosting": {
-    "public": "dist",
+    "public": "dist/packages/demo-app",
     "rewrites": [
       {
         "source": "/**/!(*.@(js|ts|html|css|json|svg|png|jpg|jpeg))",
@@ -22,11 +22,7 @@
       }
     ],
     "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**",
-      "tmp",
-      "deploy"
+      "firebase.json"
     ]
   }
 }

tools/gulp/tasks/development.ts

@@ -1,14 +1,26 @@
 import {task, watch} from 'gulp';
-import {DIST_ROOT, SOURCE_ROOT} from '../constants';
+import {DIST_ROOT, SOURCE_ROOT, PROJECT_ROOT, DIST_BUNDLES, DIST_MATERIAL} from '../constants';
 import {
   sassBuildTask, tsBuildTask, copyTask, buildAppTask, sequenceTask, triggerLivereload,
   serverTask
 } from '../util/task_helpers';
 import {join} from 'path';
+import {copyFiles} from '../util/copy-files';
+
+// These imports don't have any typings provided.
+const firebaseTools = require('firebase-tools');
 
 const appDir = join(SOURCE_ROOT, 'demo-app');
 const outDir = join(DIST_ROOT, 'packages', 'demo-app');
 
+/** Array of vendors that are required to serve the demo-app. */
+const appVendors = [
+  '@angular', 'systemjs', 'zone.js', 'rxjs', 'hammerjs', 'core-js', 'web-animations-js'
+];
+
+/** Glob that matches all required vendors for the demo-app. */
+const vendorGlob = `+(${appVendors.join('|')})/**/*.+(html|css|js|map)`;
+
 task(':watch:devapp', () => {
   watch(join(appDir, '**/*.ts'), [':build:devapp:ts', triggerLivereload]);
   watch(join(appDir, '**/*.scss'), [':build:devapp:scss', triggerLivereload]);
@@ -28,3 +40,21 @@ task(':serve:devapp', serverTask(outDir, true));
 task('serve:devapp', ['build:devapp'], sequenceTask(
   [':serve:devapp', 'material:watch', ':watch:devapp']
 ));
+
+/** Task that copies all vendors into the demo-app package. Allows hosting the app on firebase. */
+task('stage-deploy:devapp', ['build:devapp'], () => {
+  copyFiles(join(PROJECT_ROOT, 'node_modules'), vendorGlob, join(outDir, 'node_modules'));
+  copyFiles(DIST_BUNDLES, '*.+(js|map)', join(outDir, 'dist/bundles'));
+  copyFiles(DIST_MATERIAL, '**/prebuilt/*.+(css|map)', join(outDir, 'dist/packages/material'));
+});
+
+/**
+ * Task that deploys the demo-app to Firebase. Firebase project will be the one that is
+ * set for project directory using the Firebase CLI.
+ */
+task('deploy:devapp', ['stage-deploy:devapp'], () => {
+  return firebaseTools.deploy({cwd: PROJECT_ROOT, only: 'hosting'})
+    // Firebase tools opens a persistent websocket connection and the process will never exit.
+    .then(() => { console.log('Successfully deployed the demo-app to firebase'); process.exit(0); })
+    .catch((err: any) => { console.log(err); process.exit(1); });
+});

tools/gulp/util/copy-files.ts

@@ -0,0 +1,12 @@
+import {sync as glob} from 'glob';
+import {mkdirpSync, copySync} from 'fs-extra';
+import {join, dirname} from 'path';
+
+/** Function to copy files that match a glob to another directory. */
+export function copyFiles(fromPath: string, fileGlob: string, outDir: string) {
+  glob(fileGlob, {cwd: fromPath}).forEach(filePath => {
+    let fileDestPath = join(outDir, filePath);
+    mkdirpSync(dirname(fileDestPath));
+    copySync(join(fromPath, filePath), fileDestPath);
+  });
+}

tools/gulp/util/package-build.ts

@@ -4,13 +4,12 @@ import {inlineMetadataResources} from './inline-resources';
 import {transpileFile} from './ts-compiler';
 import {ScriptTarget, ModuleKind} from 'typescript';
 import {sync as glob} from 'glob';
-import {
-  writeFileSync, copySync, mkdirpSync, readFileSync
-} from 'fs-extra';
+import {writeFileSync, readFileSync} from 'fs-extra';
 import {
   DIST_BUNDLES, DIST_ROOT, SOURCE_ROOT, PROJECT_ROOT, LICENSE_BANNER, MATERIAL_VERSION
 } from '../constants';
 import {addPureAnnotations} from './annotate-pure';
+import {copyFiles} from './copy-files';
 
 // There are no type definitions available for these imports.
 const uglify = require('uglify-js');
@@ -107,14 +106,6 @@ function uglifyFile(inputPath: string, outputPath: string) {
   writeFileSync(sourcemapOut, result.map);
 }
 
-function copyFiles(fromPath: string, fileGlob: string, outDir: string) {
-  glob(fileGlob, {cwd: fromPath}).forEach(filePath => {
-    let fileDestPath = join(outDir, filePath);
-    mkdirpSync(dirname(fileDestPath));
-    copySync(join(fromPath, filePath), fileDestPath);
-  });
-}
-
 /** Updates the `package.json` file of the specified package. Replaces the version placeholder. */
 function updatePackageVersion(packageDir: string) {
   let packagePath = join(packageDir, 'package.json');