chore(): add gulp task to create a systemjs bundle

* Gulp task to create a bundle, which includes all components and all Angular 2 packages
* Designed to run inside of the Plunker Template
* Task to deploy to firebase (as per angular#913)

Closes angular#913

package.json

@@ -80,6 +80,7 @@
     "strip-ansi": "^3.0.0",
     "stylelint": "^6.9.0",
     "symlink-or-copy": "^1.0.1",
+    "systemjs-builder": "^0.15.31",
     "ts-node": "^0.7.3",
     "tslint": "^3.13.0",
     "typescript": "^2.0.0",

scripts/release/inline-resources.js

@@ -30,6 +30,9 @@ const writeFile = promiseify(fs.writeFile);
 
 
 function inlineResources(globs) {
+
+  var inlineTasks = [];
+
   /**
    * For every argument, inline the templates and styles under it and write the new file.
    */
@@ -43,17 +46,18 @@ function inlineResources(globs) {
       .filter(name => /\.js$/.test(name));  // Matches only JavaScript files.
 
     // Generate all files content with inlined templates.
-    files.forEach(filePath => {
-      readFile(filePath, 'utf-8')
+    inlineTasks = files.map(filePath => {
+      return readFile(filePath, 'utf-8')
         .then(content => inlineTemplate(filePath, content))
         .then(content => inlineStyle(filePath, content))
         .then(content => removeModuleId(filePath, content))
         .then(content => writeFile(filePath, content))
-        .catch(err => {
-          console.error('An error occured: ', err);
-        });
     });
   }
+
+  return Promise
+    .all(inlineTasks)
+    .catch(err => console.error('An error occurred: ', err));
 }
 
 if (require.main === module) {

tools/gulp/constants.ts

@@ -6,6 +6,11 @@ export const SOURCE_ROOT = join(PROJECT_ROOT, 'src');
 export const DIST_ROOT = join(PROJECT_ROOT, 'dist');
 export const DIST_COMPONENTS_ROOT = join(DIST_ROOT, '@angular2-material');
 
+export const DIST_BUNDLES_ROOT = join(DIST_ROOT, 'bundles');
+export const DIST_BUNDLES_OUTPUT_FILE = join(DIST_BUNDLES_ROOT, 'components.bundle.js');
+
+export const PLUNKER_FIREBASE_NAME = 'material2-plnkr';
+export const PLUNKER_FIREBASE_TOKEN = process.env['MATERIAL2_PLNKR_TOKEN'];
 
 export const NPM_VENDOR_FILES = [
   '@angular', 'core-js/client', 'hammerjs', 'rxjs', 'systemjs/dist', 'zone.js/dist'

tools/gulp/gulpfile.ts

@@ -8,3 +8,4 @@ import './tasks/lint';
 import './tasks/release';
 import './tasks/serve';
 import './tasks/unit-test';
+import './tasks/bundle';

tools/gulp/tasks/bundle.ts

@@ -0,0 +1,87 @@
+import {task} from 'gulp';
+import {
+  DIST_COMPONENTS_ROOT, DIST_ROOT, PROJECT_ROOT, DIST_BUNDLES_OUTPUT_FILE, DIST_BUNDLES_ROOT,
+  PLUNKER_FIREBASE_NAME, PLUNKER_FIREBASE_TOKEN
+} from '../constants';
+import * as path from 'path';
+
+const inlineResources = require('../../../scripts/release/inline-resources');
+const systemjsBuilder = require('systemjs-builder');
+const globSync = require('glob').sync;
+const firebase = require('firebase-tools');
+
+const BUNDLE_LIBRARIES = [
+  '@angular/core/',
+  '@angular/common',
+  '@angular/compiler',
+  '@angular/forms',
+  '@angular/http',
+  '@angular/platform-browser',
+  '@angular/platform-browser-dynamic',
+];
+
+task(':build:bundle:inline', () => {
+  return inlineResources([
+    path.join(DIST_ROOT, '*/', '*.js'),
+    DIST_COMPONENTS_ROOT
+  ]);
+});
+
+task('build:bundle', ['build:components', ':build:devapp:vendor', ':build:bundle:inline'], () => {
+
+  const components = globSync('@angular2-material/*/', { cwd: DIST_ROOT });
+  const entryPoints = components.concat(BUNDLE_LIBRARIES);
+
+  var builder = new systemjsBuilder(path.relative(PROJECT_ROOT, DIST_ROOT));
+
+  builder.config({
+    packages: {
+      '.': {
+        defaultExtension: 'js'
+      }
+    },
+    map: {
+      '@angular': 'vendor/@angular',
+      'rxjs': 'vendor/rxjs'
+    }
+  });
+
+  builder.config({ packages: createUmdPackage(components) });
+  builder.config({ packages: createUmdPackage(BUNDLE_LIBRARIES, './bundles') });
+
+  return builder.bundle(entryPoints.join(' + '), DIST_BUNDLES_OUTPUT_FILE, {
+    minify: true,
+    sourceMaps: false
+  });
+});
+
+/**
+ * Creates a package configuration for SystemJS from the specified packages.
+ */
+function createUmdPackage(packages: string[], folder = './'): any {
+  let packageMap: any = {};
+
+  packages.forEach((pkgName: string) => {
+    let basename = path.basename(pkgName);
+    let main = path.join(folder, `${basename}.umd.js`);
+
+    // Transform to unix delimiter, because SystemJS does not support other delimiters.
+    packageMap[pkgName] = { main: main.replace(/\\/g, '/') };
+  });
+
+  return packageMap;
+}
+
+task('deploy:bundle:plunker', ['build:bundle'], () => {
+  return firebase.deploy({
+    firebase: PLUNKER_FIREBASE_NAME,
+    token: PLUNKER_FIREBASE_TOKEN,
+    public: path.relative(PROJECT_ROOT, DIST_BUNDLES_ROOT)
+  }).then(() => {
+    console.log('Firebase: Successfully deployed bundle to firebase.');
+    process.exit(0); // Manually exit the process, because the CLI keeps the process alive.
+  }).catch((error: any) => {
+    console.error(error.message || error);
+    process.exit(1); // Manually exit the process, because the CLI keeps the process alive.
+  });
+});