chore: move umd bundles to bundles directory (#2316)

* Moves the generated `.umd` files to the `bundles/` directory (as @angular/core)
* Uses a gulp plugin for rollup because its more clear and also allows us to easily minify & create sourcemaps in the future

Author: devversion

package.json

@@ -66,6 +66,7 @@
     "glob": "^6.0.4",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
+    "gulp-better-rollup": "^1.0.2",
     "gulp-clean": "^0.3.2",
     "gulp-clean-css": "^2.3.0",
     "gulp-cli": "^1.2.2",
@@ -91,7 +92,6 @@
     "node-sass": "^3.4.2",
     "protractor": "^4.0.8",
     "resolve-bin": "^0.4.0",
-    "rollup": "^0.34.13",
     "run-sequence": "^1.2.2",
     "sass": "^0.5.0",
     "selenium-webdriver": "2.53.3",

src/demo-app/system-config.ts

@@ -17,14 +17,11 @@ System.config({
     '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
     '@angular/platform-browser-dynamic':
       'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/material': '@angular/material/bundles/material.umd.js'
   },
   packages: {
     // Thirdparty barrels.
     'rxjs': { main: 'index' },
-    '@angular/material': {
-      format: 'cjs',
-      main: 'material.umd.js'
-    },
     // Set the default extension for the root package, because otherwise the demo-app can't
     // be built within the production mode. Due to missing file extensions.
     '.': {

src/e2e-app/system-config.ts

@@ -19,14 +19,11 @@ System.config({
       'vendor/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
     '@angular/platform-browser-dynamic':
       'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+    '@angular/material': '@angular/material/bundles/material.umd.js'
   },
   packages: {
     // Thirdparty barrels.
     'rxjs': { main: 'index' },
-    '@angular/material': {
-      format: 'cjs',
-      main: 'material.umd.js'
-    },
     // Set the default extension for the root package, because otherwise the demo-app can't
     // be built within the production mode. Due to missing file extensions.
     '.': {

tools/gulp/tasks/components.ts

@@ -5,11 +5,10 @@ import {
   DIST_COMPONENTS_ROOT, PROJECT_ROOT, COMPONENTS_DIR, HTML_MINIFIER_OPTIONS
 } from '../constants';
 import {sassBuildTask, tsBuildTask, execNodeTask, copyTask, sequenceTask} from '../task_helpers';
-import {writeFileSync} from 'fs';
 
 // No typings for these.
 const inlineResources = require('../../../scripts/release/inline-resources');
-const rollup = require('rollup').rollup;
+const gulpRollup = require('gulp-better-rollup');
 const gulpMinifyCss = require('gulp-clean-css');
 const gulpMinifyHtml = require('gulp-htmlmin');
 const gulpIf = require('gulp-if');
@@ -85,30 +84,23 @@ task(':build:components:rollup', () => {
     'rxjs/Observable': 'Rx'
   };
 
-  // Rollup the @angular/material UMD bundle from all ES5 + imports JavaScript files built.
-  return rollup({
-    entry: path.join(DIST_COMPONENTS_ROOT, 'index.js'),
+  const rollupOptions = {
     context: 'this',
     external: Object.keys(globals)
-  }).then((bundle: { generate: any }) => {
-    const result = bundle.generate({
-      moduleName: 'ng.material',
-      format: 'umd',
-      globals,
-      sourceMap: true,
-      dest: path.join(DIST_COMPONENTS_ROOT, 'material.umd.js')
-    });
-
-    // Add source map URL to the code.
-    result.code += '\n\n//# sourceMappingURL=./material.umd.js.map\n';
-    // Format mapping to show properly in the browser. Rollup by default will put the path
-    // as relative to the file, and since that path is in src/lib and the file is in
-    // dist/@angular/material, we need to kill a few `../`.
-    result.map.sources = result.map.sources.map((s: string) => s.replace(/^(\.\.\/)+/, ''));
-
-    writeFileSync(path.join(DIST_COMPONENTS_ROOT, 'material.umd.js'), result.code, 'utf8');
-    writeFileSync(path.join(DIST_COMPONENTS_ROOT, 'material.umd.js.map'), result.map, 'utf8');
-  });
+  };
+
+  const rollupGenerateOptions = {
+    // Keep the moduleId empty because we don't want to force developers to a specific moduleId.
+    moduleId: '',
+    moduleName: 'ng.material',
+    format: 'umd',
+    globals,
+    dest: 'material.umd.js'
+  };
+
+  return src(path.join(DIST_COMPONENTS_ROOT, 'index.js'))
+    .pipe(gulpRollup(rollupOptions, rollupGenerateOptions))
+    .pipe(dest(path.join(DIST_COMPONENTS_ROOT, 'bundles')));
 });
 
 /** Builds components with resources (html, css) inlined into the built JS (ESM output). */