build: use shared logic to build packages (#4202)

* build: use shared logic to build packages

* No longer creates the whole set of gulp tasks just to build a single package.
* Makes the package building & releasing more consistent. No extra `build:release` just for the `lib` package.

References #4108

* Address feedback

Author: devversion

DEV_ENVIRONMENT.md

@@ -9,8 +9,8 @@
 5. From the root of the project, run `npm install`.
 
 
-To build the components in dev mode, run `gulp build:components`.
-To build the components in release mode, run `gulp build:release`
+To build Material in dev mode, run `gulp material:build`.
+To build Material in release mode, run `gulp material:build-release`
 
 To bring up a local server, run `gulp serve:devapp`. This will automatically watch for changes 
 and rebuild. The browser should refresh automatically when changes are made.

package.json

@@ -8,7 +8,7 @@
     "url": "https://github.com/angular/material2.git"
   },
   "scripts": {
-    "build": "gulp build:release",
+    "build": "gulp material:build-release:clean",
     "demo-app": "gulp serve:devapp",
     "test": "gulp test",
     "tslint": "gulp lint",

scripts/closure-compiler/build-devapp-bundle.sh

@@ -9,8 +9,8 @@ set -e -o pipefail
 cd $(dirname $0)/../..
 
 
-# Build a release of the library and of the CDK package.
-$(npm bin)/gulp build:release
+# Build a release of material and of the CDK package.
+$(npm bin)/gulp material:build-release:clean
 $(npm bin)/gulp cdk:build-release
 
 # Build demo-app with ES2015 modules. Closure compiler is then able to parse imports.

scripts/release/publish-build-artifacts.sh

@@ -21,7 +21,7 @@ repoUrl="https://github.com/angular/material2-builds.git"
 repoDir="tmp/$repoName"
 
 # Create a release of the current repository.
-$(npm bin)/gulp build:release
+$(npm bin)/gulp material:build-release:clean
 
 # Prepare cloning the builds repository
 rm -rf $repoDir

src/material-examples/tsconfig-build.json

@@ -7,7 +7,7 @@
     "experimentalDecorators": true,
     "module": "es2015",
     "moduleResolution": "node",
-    "outDir": "../../dist/packages/examples",
+    "outDir": "../../dist/packages/material-examples",
     "rootDir": ".",
     "sourceMap": true,
     "inlineSources": true,

tools/gulp/gulpfile.ts

@@ -1,16 +1,21 @@
+import {createPackageBuildTasks} from './util/package-tasks';
+
+/** Create gulp tasks to build the different packages in the project. */
+createPackageBuildTasks('cdk');
+createPackageBuildTasks('material', ['cdk']);
+createPackageBuildTasks('material-examples', ['material']);
+
 import './tasks/ci';
 import './tasks/clean';
 import './tasks/default';
 import './tasks/development';
 import './tasks/docs';
 import './tasks/e2e';
 import './tasks/lint';
-import './tasks/release';
+import './tasks/publish';
 import './tasks/screenshots';
 import './tasks/unit-test';
 import './tasks/aot';
 import './tasks/payload';
 import './tasks/coverage';
-import './tasks/library';
-import './tasks/examples';
-import './tasks/cdk';
+import './tasks/material-release';

tools/gulp/tasks/aot.ts

@@ -6,10 +6,10 @@ import {join} from 'path';
 
 const tsconfigFile = join(DIST_DEMOAPP, 'tsconfig-aot.json');
 
-/** Builds the demo-app and library. To be able to run NGC, apply the metadata workaround. */
+/** Builds the demo-app and material. To be able to run NGC, apply the metadata workaround. */
 task('aot:deps', sequenceTask(
   'build:devapp',
-  [':package:release', 'cdk:build-release'],
+  ['material:build-release', 'cdk:build-release'],
   'aot:copy-release'
 ));
 

tools/gulp/tasks/cdk.ts

@@ -26,5 +26,5 @@ task('build:devapp', buildAppTask('devapp'));
 task(':serve:devapp', serverTask(outDir, true));
 
 task('serve:devapp', ['build:devapp'], sequenceTask(
-  [':serve:devapp', 'library:watch', ':watch:devapp']
+  [':serve:devapp', 'material:watch', ':watch:devapp']
 ));

tools/gulp/tasks/development.ts

@@ -48,7 +48,7 @@ task('serve:e2eapp', sequenceTask('build:e2eapp', ':serve:e2eapp'));
  * [Watch task] Builds and serves e2e app, rebuilding whenever the sources change.
  * This should only be used when running e2e tests locally.
  */
-task('serve:e2eapp:watch', ['serve:e2eapp', 'library:watch', ':watch:e2eapp']);
+task('serve:e2eapp:watch', ['serve:e2eapp', 'material:watch', ':watch:e2eapp']);
 
 /**
  * Builds and serves the e2e-app and runs protractor once the e2e-app is ready.

tools/gulp/tasks/e2e.ts

@@ -5,7 +5,7 @@ import {DIST_MATERIAL} from '../constants';
 gulp.task('lint', ['tslint', 'stylelint', 'madge', 'dashboardlint']);
 
 /** Task that runs madge to detect circular dependencies. */
-gulp.task('madge', ['library:clean-build'], execNodeTask('madge', ['--circular', DIST_MATERIAL]));
+gulp.task('madge', ['material:clean-build'], execNodeTask('madge', ['--circular', DIST_MATERIAL]));
 
 /** Task to lint Angular Material's scss stylesheets. */
 gulp.task('stylelint', execNodeTask(

tools/gulp/tasks/examples.ts

@@ -0,0 +1,53 @@
+import {task, src, dest} from 'gulp';
+import {join} from 'path';
+import {writeFileSync} from 'fs';
+import {Bundler} from 'scss-bundle';
+import {execNodeTask, sequenceTask} from '../util/task_helpers';
+import {composeRelease} from '../util/package-build';
+import {COMPONENTS_DIR, DIST_MATERIAL, DIST_RELEASES} from '../constants';
+
+// There are no type definitions available for these imports.
+const gulpRename = require('gulp-rename');
+
+// Path to the release output of material.
+const releasePath = join(DIST_RELEASES, 'material');
+// The entry-point for the scss theming bundle.
+const themingEntryPointPath = join(COMPONENTS_DIR, 'core', 'theming', '_all-theme.scss');
+// Output path for the scss theming bundle.
+const themingBundlePath = join(releasePath, '_theming.scss');
+// Matches all pre-built theme css files
+const prebuiltThemeGlob = join(DIST_MATERIAL, '**/theming/prebuilt/*.css');
+// Matches all SCSS files in the library.
+const allScssGlob = join(COMPONENTS_DIR, '**/*.scss');
+
+/**
+ * Overwrite the release task for the material package. The material release will include special
+ * files, like a bundled theming SCSS file or all prebuilt themes.
+ */
+task('material:build-release', ['material:prepare-release'], () => composeRelease('material'));
+
+/**
+ * Task that will build the material package. It will also copy all prebuilt themes and build
+ * a bundled SCSS file for theming
+ */
+task('material:prepare-release', sequenceTask(
+  'material:build',
+  ['material:copy-prebuilt-themes', 'material:bundle-theming-scss']
+));
+
+/** Copies all prebuilt themes into the release package under `prebuilt-themes/` */
+task('material:copy-prebuilt-themes', () => {
+  src(prebuiltThemeGlob)
+    .pipe(gulpRename({dirname: ''}))
+    .pipe(dest(join(releasePath, 'prebuilt-themes')));
+});
+
+/** Bundles all scss requires for theming into a single scss file in the root of the package. */
+task('material:bundle-theming-scss', () => {
+  // Instantiates the SCSS bundler and bundles all imports of the specified entry point SCSS file.
+  // A glob of all SCSS files in the library will be passed to the bundler. The bundler takes an
+  // array of globs, which will match SCSS files that will be only included once in the bundle.
+  new Bundler().Bundle(themingEntryPointPath, [allScssGlob]).then(result => {
+    writeFileSync(themingBundlePath, result.bundledContent);
+  });
+});

tools/gulp/tasks/library.ts

@@ -8,8 +8,8 @@ import {openFirebaseDashboardDatabase} from '../util/firebase';
 
 const bundlesDir = join(DIST_ROOT, 'bundles');
 
-/** Task which runs test against the size of whole library. */
-task('payload', ['library:clean-build'], () => {
+/** Task which runs test against the size of material. */
+task('payload', ['material:clean-build'], () => {
 
   let results = {
     umd_kb: getBundleSize('material.umd.js'),