build: dynamic build config for packaging (#4939)

* build: dynamic build config for packaging

* Make discussed changes

Author: devversion

build-config.js

@@ -0,0 +1,23 @@
+/**
+ * Build configuration for the packaging tool. This file will be automatically detected and used
+ * to build the different packages inside of Material.
+ */
+const {join} = require('path');
+
+/** Current version of the project*/
+const buildVersion = require('./package.json').version;
+
+/** License that will be placed inside of all created bundles. */
+const buildLicense = `/**
+  * @license Angular Material v${buildVersion}
+  * Copyright (c) 2017 Google, Inc. https://material.angular.io/
+  * License: MIT
+  */`;
+
+module.exports = {
+  projectVersion: buildVersion,
+  projectDir: __dirname,
+  packagesDir: join(__dirname, 'src'),
+  outputDir: join(__dirname, 'dist'),
+  licenseBanner: buildLicense
+};

tools/gulp/build-config.ts

@@ -1,6 +1,6 @@
 import {createPackageBuildTasks} from './packaging/build-tasks-gulp';
 
-/** Create gulp tasks to build the different packages in the project. */
+// Create gulp tasks to build the different packages in the project.
 createPackageBuildTasks('cdk');
 createPackageBuildTasks('material', ['cdk']);
 createPackageBuildTasks('material-examples', ['material']);

tools/gulp/gulpfile.ts

@@ -1,24 +1,27 @@
 import {join} from 'path';
 import {ScriptTarget, ModuleKind} from 'typescript';
-import {DIST_BUNDLES} from '../build-config';
 import {uglifyJsFile} from './minify-sources';
 import {createRollupBundle} from './rollup-helpers';
 import {remapSourcemap} from './sourcemap-remap';
 import {transpileFile} from './typescript-transpile';
+import {buildConfig} from './build-config';
 
 // There are no type definitions available for these imports.
 const uglify = require('uglify-js');
 const sorcery = require('sorcery');
 
+/** Directory where all bundles will be created in. */
+const bundlesDir = join(buildConfig.outputDir, 'bundles');
+
 /** Builds the bundles for the specified package. */
 export async function buildPackageBundles(entryFile: string, packageName: string) {
   const moduleName = `ng.${packageName}`;
 
   // List of paths to the package bundles.
-  const fesm2015File = join(DIST_BUNDLES, `${packageName}.js`);
-  const fesm2014File = join(DIST_BUNDLES, `${packageName}.es5.js`);
-  const umdFile = join(DIST_BUNDLES, `${packageName}.umd.js`);
-  const umdMinFile = join(DIST_BUNDLES, `${packageName}.umd.min.js`);
+  const fesm2015File = join(bundlesDir, `${packageName}.js`);
+  const fesm2014File = join(bundlesDir, `${packageName}.es5.js`);
+  const umdFile = join(bundlesDir, `${packageName}.umd.js`);
+  const umdMinFile = join(bundlesDir, `${packageName}.umd.min.js`);
 
   // Build FESM-2015 bundle file.
   await createRollupBundle({

tools/gulp/packaging/build-bundles.ts

@@ -0,0 +1,25 @@
+import {findBuildConfig} from './find-build-config';
+
+export interface BuildConfig {
+  /** Current version of the project. */
+  projectVersion: string;
+  /** Path to the root of the project. */
+  projectDir: string;
+  /** Path to the directory where all packages are living. */
+  packagesDir: string;
+  /** Path to the directory where the output will be stored. */
+  outputDir: string;
+  /** License banner that will be placed inside of every bundle. */
+  licenseBanner: string;
+}
+
+// Search for a build config by walking up the current working directory of the Node process.
+const buildConfigPath = findBuildConfig();
+
+if (!buildConfigPath) {
+  throw 'Material2 Build tools were not able to find a build config. ' +
+  'Please create a "build-config.js" file in your project.';
+}
+
+// Load the config file using a basic CommonJS import.
+export const buildConfig = require(buildConfigPath) as BuildConfig;

tools/gulp/packaging/build-config.ts

@@ -1,11 +1,16 @@
 import {join} from 'path';
-import {DIST_BUNDLES, DIST_ROOT, SOURCE_ROOT, PROJECT_ROOT} from '../build-config';
 import {copyFiles} from '../util/copy-files';
 import {addPureAnnotationsToFile} from './pure-annotations';
 import {updatePackageVersion} from './package-versions';
 import {inlinePackageMetadataFiles} from './metadata-inlining';
 import {createTypingsReexportFile} from './typings-reexport';
 import {createMetadataReexportFile} from './metadata-reexport';
+import {buildConfig} from './build-config';
+
+const {packagesDir, outputDir, projectDir} = buildConfig;
+
+/** Directory where all bundles will be created in. */
+const bundlesDir = join(outputDir, 'bundles');
 
 /**
  * Copies different output files into a folder structure that follows the `angular/angular`
@@ -14,17 +19,17 @@ import {createMetadataReexportFile} from './metadata-reexport';
  */
 export function composeRelease(packageName: string) {
   // To avoid refactoring of the project the package material will map to the source path `lib/`.
-  const sourcePath = join(SOURCE_ROOT, packageName === 'material' ? 'lib' : packageName);
-  const packagePath = join(DIST_ROOT, 'packages', packageName);
-  const releasePath = join(DIST_ROOT, 'releases', packageName);
+  const sourcePath = join(packagesDir, packageName === 'material' ? 'lib' : packageName);
+  const packagePath = join(outputDir, 'packages', packageName);
+  const releasePath = join(outputDir, 'releases', packageName);
 
   inlinePackageMetadataFiles(packagePath);
 
   copyFiles(packagePath, '**/*.+(d.ts|metadata.json)', join(releasePath, 'typings'));
-  copyFiles(DIST_BUNDLES, `${packageName}.umd?(.min).js?(.map)`, join(releasePath, 'bundles'));
-  copyFiles(DIST_BUNDLES, `${packageName}?(.es5).js?(.map)`, join(releasePath, '@angular'));
-  copyFiles(PROJECT_ROOT, 'LICENSE', releasePath);
-  copyFiles(SOURCE_ROOT, 'README.md', releasePath);
+  copyFiles(bundlesDir, `${packageName}.umd?(.min).js?(.map)`, join(releasePath, 'bundles'));
+  copyFiles(bundlesDir, `${packageName}?(.es5).js?(.map)`, join(releasePath, '@angular'));
+  copyFiles(projectDir, 'LICENSE', releasePath);
+  copyFiles(packagesDir, 'README.md', releasePath);
   copyFiles(sourcePath, 'package.json', releasePath);
 
   updatePackageVersion(releasePath);

tools/gulp/packaging/build-release.ts

@@ -1,7 +1,7 @@
 import {task, watch, src, dest} from 'gulp';
 import {join} from 'path';
 import {main as tsc} from '@angular/tsc-wrapped';
-import {SOURCE_ROOT, DIST_ROOT, HTML_MINIFIER_OPTIONS} from '../build-config';
+import {buildConfig} from './build-config';
 import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
 import {composeRelease} from './build-release';
 import {buildPackageBundles} from './build-bundles';
@@ -10,15 +10,24 @@ import {inlineResourcesForDirectory} from './inline-resources';
 // There are no type definitions available for these imports.
 const htmlmin = require('gulp-htmlmin');
 
+const {packagesDir, outputDir} = buildConfig;
+
+const htmlMinifierOptions = {
+  collapseWhitespace: true,
+  removeComments: true,
+  caseSensitive: true,
+  removeAttributeQuotes: false
+};
+
 /**
  * Creates a set of gulp tasks that can build the specified package.
  * @param packageName Name of the package. Needs to be similar to the directory name in `src/`.
  * @param requiredPackages Required packages that will be built before building the current package.
  */
 export function createPackageBuildTasks(packageName: string, requiredPackages: string[] = []) {
   // To avoid refactoring of the project the package material will map to the source path `lib/`.
-  const packageRoot = join(SOURCE_ROOT, packageName === 'material' ? 'lib' : packageName);
-  const packageOut = join(DIST_ROOT, 'packages', packageName);
+  const packageRoot = join(packagesDir, packageName === 'material' ? 'lib' : packageName);
+  const packageOut = join(outputDir, 'packages', packageName);
 
   const tsconfigBuild = join(packageRoot, 'tsconfig-build.json');
   const tsconfigTests = join(packageRoot, 'tsconfig-tests.json');
@@ -81,7 +90,7 @@ export function createPackageBuildTasks(packageName: string, requiredPackages: s
   task(`${packageName}:assets:scss`, sassBuildTask(packageOut, packageRoot, true));
   task(`${packageName}:assets:copy-styles`, copyTask(stylesGlob, packageOut));
   task(`${packageName}:assets:html`, () => {
-    return src(htmlGlob).pipe(htmlmin(HTML_MINIFIER_OPTIONS)).pipe(dest(packageOut));
+    return src(htmlGlob).pipe(htmlmin(htmlMinifierOptions)).pipe(dest(packageOut));
   });
 
   task(`${packageName}:assets:inline`, () => inlineResourcesForDirectory(packageOut));

tools/gulp/packaging/build-tasks-gulp.ts

@@ -0,0 +1,22 @@
+import {resolve, dirname, join} from 'path';
+import {existsSync} from 'fs';
+
+/** Name of the build config file. */
+const BUILD_CONFIG_FILENAME = 'build-config.js';
+
+/** Method that searches for a build config file that will be used for packaging. */
+export function findBuildConfig(): string {
+  let currentDir = process.cwd();
+
+  while (!existsSync(resolve(currentDir, BUILD_CONFIG_FILENAME))) {
+    let parentDir = dirname(currentDir);
+
+    if (parentDir === currentDir) {
+      return null;
+    }
+
+    currentDir = parentDir;
+  }
+
+  return join(currentDir, BUILD_CONFIG_FILENAME);
+}

tools/gulp/packaging/find-build-config.ts

@@ -1,14 +1,17 @@
 import {writeFileSync} from 'fs';
 import {join} from 'path';
-import {MATERIAL_VERSION} from '../build-config';
+import {buildConfig} from './build-config';
+
+/** Version of the project that will be used to replace the placeholder. */
+const {projectVersion} = buildConfig;
 
 /** Updates the `package.json` file of the specified package. Replaces the version placeholder. */
 export function updatePackageVersion(packageDir: string) {
   const packagePath = join(packageDir, 'package.json');
   const packageConfig = require(packagePath);
 
   // Replace the `0.0.0-PLACEHOLDER` version name with the version of the root package.json file.
-  packageConfig.version = packageConfig.version.replace('0.0.0-PLACEHOLDER', MATERIAL_VERSION);
+  packageConfig.version = packageConfig.version.replace('0.0.0-PLACEHOLDER', projectVersion);
 
   writeFileSync(packagePath, JSON.stringify(packageConfig, null, 2));
 }

tools/gulp/packaging/package-versions.ts

@@ -1,4 +1,4 @@
-import {LICENSE_BANNER} from '../build-config';
+import {buildConfig} from './build-config';
 
 // There are no type definitions available for these imports.
 const rollup = require('rollup');
@@ -69,7 +69,7 @@ export function createRollupBundle(config: BundleConfig): Promise<any> {
     // Keep the moduleId empty because we don't want to force developers to a specific moduleId.
     moduleId: '',
     moduleName: config.moduleName || 'ng.material',
-    banner: LICENSE_BANNER,
+    banner: buildConfig.licenseBanner,
     format: config.format,
     dest: config.dest,
     globals: ROLLUP_GLOBALS,