From ea40615f40bc110a8557a38b8e9d3f569d56a75b Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sat, 29 Apr 2017 13:22:16 +0200 Subject: [PATCH 1/2] 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 --- firebase.json | 8 ++------ tools/gulp/tasks/development.ts | 18 +++++++++++++++++- tools/gulp/util/copy-files.ts | 12 ++++++++++++ tools/gulp/util/package-build.ts | 13 ++----------- 4 files changed, 33 insertions(+), 18 deletions(-) create mode 100644 tools/gulp/util/copy-files.ts diff --git a/firebase.json b/firebase.json index fff3ac5bec08..07d20283b88b 100644 --- a/firebase.json +++ b/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" ] } } diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts index bd2f4890efa1..ed5727be7e31 100644 --- a/tools/gulp/tasks/development.ts +++ b/tools/gulp/tasks/development.ts @@ -1,14 +1,23 @@ 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'; 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 +37,10 @@ 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('build-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')); +}); diff --git a/tools/gulp/util/copy-files.ts b/tools/gulp/util/copy-files.ts new file mode 100644 index 000000000000..48412d3ef9b3 --- /dev/null +++ b/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); + }); +} diff --git a/tools/gulp/util/package-build.ts b/tools/gulp/util/package-build.ts index c4b0b97c1534..24804897eb99 100644 --- a/tools/gulp/util/package-build.ts +++ b/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'); From e75704bdd4db37498a75a66ffc9847e96d869b09 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 2 May 2017 20:22:35 +0200 Subject: [PATCH 2/2] Add firebase deploy task --- tools/gulp/tasks/development.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts index ed5727be7e31..5af9e24d7111 100644 --- a/tools/gulp/tasks/development.ts +++ b/tools/gulp/tasks/development.ts @@ -7,6 +7,9 @@ import { 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'); @@ -39,8 +42,19 @@ task('serve:devapp', ['build:devapp'], sequenceTask( )); /** Task that copies all vendors into the demo-app package. Allows hosting the app on firebase. */ -task('build-deploy:devapp', ['build:devapp'], () => { +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); }); +});