Package intermediate build artifacts into desired npm package structure

Author: jelbourn

src/demo-app/tsconfig-aot.json

@@ -2,6 +2,7 @@
 {
   "extends": "./tsconfig",
   "compilerOptions": {
+    "experimentalDecorators": true,
     "paths": {
       "@angular/material": ["../material"]
     }

src/lib/tsconfig-specs.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
-    "types": ["jasmine"]
+    "types": ["jasmine"],
+    "experimentalDecorators": true
   },
   "include": [
     "system-config-spec.ts",

tools/gulp/constants.ts

@@ -5,11 +5,18 @@ export const MATERIAL_VERSION = require('../../package.json').version;
 export const PROJECT_ROOT = join(__dirname, '../..');
 export const SOURCE_ROOT = join(PROJECT_ROOT, 'src');
 
+/** Root build output directory */
 export const DIST_ROOT = join(PROJECT_ROOT, 'dist');
+
+/** Output subdirectory where all bundles will be written (flat ES modules and UMD) */
 export const DIST_BUNDLES = join(DIST_ROOT, 'bundles');
-export const DIST_RELEASE = join(DIST_ROOT, 'release');
 
+/** Output subdirectory where all library artifacts will be written (compiled JS, CSS, etc.) */
 export const DIST_MATERIAL = join(DIST_ROOT, 'packages', 'material');
+
+/** Output subdirectory where the npm package will be staged for publish */
+export const DIST_RELEASE = join(DIST_ROOT, 'release');
+
 export const DIST_DEMOAPP = join(DIST_ROOT, 'packages', 'demo-app');
 export const DIST_E2EAPP = join(DIST_ROOT, 'packages', 'e2e-app');
 

tools/gulp/gulpfile.ts

@@ -12,3 +12,5 @@ import './tasks/aot';
 import './tasks/payload';
 import './tasks/coverage';
 import './tasks/library';
+
+import './tasks/packaging';

tools/gulp/tasks/clean.ts

@@ -1,6 +1,7 @@
 import {task} from 'gulp';
 import {DIST_ROOT} from '../constants';
-import {cleanTask} from '../util/task_helpers';
+import {cleanTask, sequenceTask} from '../util/task_helpers';
 
 
+/** Deletes the dist/ directory. */
 task('clean', cleanTask(DIST_ROOT));

tools/gulp/tasks/packaging.ts

@@ -0,0 +1,23 @@
+import {join} from 'path';
+import {task, watch} from 'gulp';
+import {main as ngc} from '@angular/compiler-cli';
+import {PROJECT_ROOT, COMPONENTS_DIR} from '../constants';
+import {SOURCE_ROOT, DIST_BUNDLES, DIST_MATERIAL, UGLIFYJS_OPTIONS} from '../constants';
+import {sequenceTask} from '../util/task_helpers';
+
+// There are no type definitions available for these imports.
+const runSequence = require('run-sequence');
+
+
+const libraryRoot = join(SOURCE_ROOT, 'lib');
+const tsconfigPath = join(libraryRoot, 'tsconfig.json');
+
+task('build:package', sequenceTask(
+  'clean',
+  ['build:package:ngc', 'library:assets'],
+  // Inline assets into ESM output.
+  'library:assets:inline',
+));
+
+
+task('build:package:ngc', () => ngc(tsconfigPath, {basePath: libraryRoot}));

tools/gulp/tasks/release.ts

@@ -1,32 +1,63 @@
 import {spawn} from 'child_process';
 import {existsSync, statSync, copySync} from 'fs-extra';
 import {join} from 'path';
-import {task} from 'gulp';
+import {task, src, dest} from 'gulp';
 import {execTask} from '../util/task_helpers';
-import {DIST_RELEASE, DIST_BUNDLES} from '../constants';
+import {DIST_RELEASE, DIST_BUNDLES, DIST_MATERIAL} from '../constants';
 
 // There are no type definitions available for these imports.
 import gulpRunSequence = require('run-sequence');
 import minimist = require('minimist');
 
 const argv = minimist(process.argv.slice(3));
 
+// Capture all d.ts files output by typescript compilation except for the special files
+// generated by ngc.
+const typingsGlob = [
+  join(DIST_MATERIAL, '**', '*.d.ts'),
+  `!${join(DIST_MATERIAL, 'index.d.ts')}`,
+  `!${join(DIST_MATERIAL, 'public_api.d.ts')}`,
+];
+
+// Capture all UMD bundles.
+const umdGlob = join(DIST_BUNDLES, '*.umd.*');
+
+// Capture all flat ESM bunldes (e.g., "material.js" and "material.es5.js")
+const fesmGlob = [join(DIST_BUNDLES, "*.js"), `!${umdGlob}`];
+
 task('build:release', function(done: () => void) {
   gulpRunSequence(
     'library:build',
-    ':build:release:copy',
+    ':package:release',
     done
   );
 });
 
-/** Task that merges the different bundles and outputs into the release folder. */
-task(':build:release:copy', () => {
+/** Task that combines intermediate build artifacts into the release package structure. */
+task(':package:release', [
+  ':package:metadata',
+  ':package:typings',
+  ':package:umd',
+  ':package:fesm',
+]);
+
+/** Copy metatadata.json and associated d.ts files to the root of the package structure. */
+task(':package:metadata', () => {
   // https://github.com/angular/angular/blob/master/build.sh#L293-L294
-  copySync(join(DIST_BUNDLES, 'index.d.ts'), join(DIST_RELEASE, 'material.d.ts'));
-  copySync(join(DIST_BUNDLES, 'index.metadata.json'), join(DIST_RELEASE, 'material.metadata.json'));
+  copySync(join(DIST_MATERIAL, 'public_api.d.ts'), join(DIST_RELEASE, 'public_api.d.ts'));
+  copySync(join(DIST_MATERIAL, 'index.d.ts'), join(DIST_RELEASE, 'material.d.ts'));
+  copySync(join(DIST_MATERIAL, 'index.metadata.json'),
+      join(DIST_RELEASE, 'material.metadata.json'));
+});
 
+/** Copy all d.ts except the special flat typings from ngc to typings/ in the release package. */
+task(':package:typings', () => src(typingsGlob).pipe(dest(join(DIST_RELEASE, 'typings'))));
 
-});
+/** Copy umd bundles to the root of the release package. */
+task(':package:umd', () => src(umdGlob).pipe((dest(join(DIST_RELEASE, 'bundles')))));
+
+/** Copy fesm bundles to @angular/material in the release package */
+task(':package:fesm', () => src(fesmGlob).pipe(dest(join(DIST_RELEASE, '@angular', 'material'))));
 
 /** Make sure we're logged in. */
 task(':publish:whoami', execTask('npm', ['whoami'], {

tools/gulp/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "experimentalDecorators": true,
     "lib": ["es2015", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",