-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Now ships a Flat / ESM bundle (similar as for Angular 4+ releases) * In future PRs we will remove the single ES-files and can just link to the ES bundle (as in angular/angular).
- Loading branch information
1 parent
02f4bc3
commit 7dcb9fd
Showing
11 changed files
with
197 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,139 +1,150 @@ | ||
| import {task, watch, src, dest} from 'gulp'; | ||
| import {ScriptTarget, ModuleKind} from 'typescript'; | ||
| import * as path from 'path'; | ||
|
|
||
| import { | ||
| DIST_COMPONENTS_ROOT, PROJECT_ROOT, COMPONENTS_DIR, HTML_MINIFIER_OPTIONS, LICENSE_BANNER | ||
| } from '../constants'; | ||
| import { | ||
| sassBuildTask, tsBuildTask, execNodeTask, copyTask, sequenceTask, | ||
| sassBuildTask, tsBuildTask, execNodeTask, sequenceTask, | ||
| triggerLivereload | ||
| } from '../task_helpers'; | ||
|
|
||
| // No typings for these. | ||
| // These imports lack of types. | ||
| const inlineResources = require('../../../scripts/release/inline-resources'); | ||
| const gulpRollup = require('gulp-better-rollup'); | ||
| const gulpMinifyCss = require('gulp-clean-css'); | ||
| const gulpMinifyHtml = require('gulp-htmlmin'); | ||
| const gulpIf = require('gulp-if'); | ||
|
|
||
| /** Path to tsconfig file for the components. */ | ||
| const tsconfigPath = path.join(COMPONENTS_DIR, 'tsconfig.json'); | ||
|
|
||
| // NOTE: there are two build "modes" in this file, based on which tsconfig is used. | ||
| // When `tsconfig.json` is used, we are outputting ES6 modules and a UMD bundle. This is used | ||
| // for serving and for release. | ||
| // | ||
| // When `tsconfig-spec.json` is used, we are outputting CommonJS modules. This is used | ||
| // for unit tests (karma). | ||
|
|
||
| /** Path to the tsconfig used for ESM output. */ | ||
| const tsconfigPath = path.relative(PROJECT_ROOT, path.join(COMPONENTS_DIR, 'tsconfig-srcs.json')); | ||
| /** Asset files to be added to the components output. */ | ||
| const assetFiles = [ | ||
| path.join(COMPONENTS_DIR, '**/*.html'), | ||
| path.join(COMPONENTS_DIR, 'package.json'), | ||
| path.join(PROJECT_ROOT, 'README.md'), | ||
| path.join(PROJECT_ROOT, 'LICENSE'), | ||
| ]; | ||
|
|
||
| /** Builds components to UMD bundle. */ | ||
| task('build:components', [':build:components:bundle:umd']); | ||
|
|
||
| /** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */ | ||
| task(':watch:components', () => { | ||
| watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components', triggerLivereload]); | ||
| watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components', triggerLivereload]); | ||
| watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components', triggerLivereload]); | ||
| }); | ||
|
|
||
| /** Builds components for Angular Material releases */ | ||
| task(':build:components:release', sequenceTask( | ||
| ':build:components:bundle:umd', | ||
| ':build:components:bundle:es', | ||
| ':build:components:ngc' | ||
| )); | ||
|
|
||
| /** Builds component typescript only (ESM output). */ | ||
| task(':build:components:ts', tsBuildTask(path.join(COMPONENTS_DIR, 'tsconfig-srcs.json'))); | ||
| /** Builds components typescript in ES5, ES6 target. For specs Karma needs CJS output. */ | ||
| task(':build:components:ts:es5', tsBuildTask(tsconfigPath, { target: ScriptTarget.ES5 })); | ||
| task(':build:components:ts:es6', tsBuildTask(tsconfigPath, { target: ScriptTarget.ES6 })); | ||
| task(':build:components:ts:spec', tsBuildTask(tsconfigPath, { | ||
| target: ScriptTarget.ES5, module: ModuleKind.CommonJS | ||
| })); | ||
|
|
||
| /** Builds components typescript for tests (CJS output). */ | ||
| task(':build:components:spec', tsBuildTask(COMPONENTS_DIR)); | ||
| /** Tasks to create a UMD or ES bundle */ | ||
| task(':build:components:bundle:umd', sequenceTask( | ||
| ':build:components:ts:es5', ':build:components:inline', ':build:components:rollup:umd' | ||
| )); | ||
|
|
||
| /** Copies assets (html, markdown) to build output. */ | ||
| task(':build:components:assets', copyTask([ | ||
| path.join(COMPONENTS_DIR, '**/*.!(ts|spec.ts)'), | ||
| path.join(PROJECT_ROOT, 'README.md'), | ||
| path.join(PROJECT_ROOT, 'LICENSE'), | ||
| ], DIST_COMPONENTS_ROOT)); | ||
| task(':build:components:bundle:es', sequenceTask( | ||
| ':build:components:ts:es6', ':build:components:inline', ':build:components:rollup:es' | ||
| )); | ||
|
|
||
| /** Minifies the HTML and CSS assets in the distribution folder. */ | ||
| task(':build:components:assets:minify', () => { | ||
| return src('**/*.+(html|css)', { cwd: DIST_COMPONENTS_ROOT}) | ||
| .pipe(gulpIf(/.css$/, gulpMinifyCss(), gulpMinifyHtml(HTML_MINIFIER_OPTIONS))) | ||
| /** Copies all component assets to the build output. */ | ||
| task(':build:components:assets', () => { | ||
| return src(assetFiles) | ||
| .pipe(gulpIf(/.html$/, gulpMinifyHtml(HTML_MINIFIER_OPTIONS))) | ||
| .pipe(dest(DIST_COMPONENTS_ROOT)); | ||
| }); | ||
|
|
||
| /** Builds scss into css. */ | ||
| task(':build:components:scss', sassBuildTask(DIST_COMPONENTS_ROOT, COMPONENTS_DIR)); | ||
|
|
||
| /** Builds the UMD bundle for all of Angular Material. */ | ||
| task(':build:components:rollup', () => { | ||
| const globals: {[name: string]: string} = { | ||
| // Angular dependencies | ||
| '@angular/core': 'ng.core', | ||
| '@angular/common': 'ng.common', | ||
| '@angular/forms': 'ng.forms', | ||
| '@angular/http': 'ng.http', | ||
| '@angular/platform-browser': 'ng.platformBrowser', | ||
| '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic', | ||
|
|
||
| // Rxjs dependencies | ||
| 'rxjs/Subject': 'Rx', | ||
| 'rxjs/add/observable/fromEvent': 'Rx.Observable', | ||
| 'rxjs/add/observable/forkJoin': 'Rx.Observable', | ||
| 'rxjs/add/observable/of': 'Rx.Observable', | ||
| 'rxjs/add/observable/merge': 'Rx.Observable', | ||
| 'rxjs/add/observable/throw': 'Rx.Observable', | ||
| 'rxjs/add/operator/auditTime': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/toPromise': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/map': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/filter': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/do': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/share': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/finally': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/catch': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/first': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/startWith': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/switchMap': 'Rx.Observable.prototype', | ||
| 'rxjs/Observable': 'Rx' | ||
| }; | ||
|
|
||
| const rollupOptions = { | ||
| context: 'this', | ||
| external: Object.keys(globals) | ||
| }; | ||
|
|
||
| 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, | ||
| banner: LICENSE_BANNER, | ||
| dest: 'material.umd.js' | ||
| }; | ||
| /** Compiles the components SCSS into minified CSS. */ | ||
| task(':build:components:scss', sassBuildTask(DIST_COMPONENTS_ROOT, COMPONENTS_DIR, true)); | ||
|
|
||
| /** Builds a ES6 bundle for all components. */ | ||
| task(':build:components:rollup:es', () => { | ||
| return src(path.join(DIST_COMPONENTS_ROOT, 'index.js')) | ||
| .pipe(gulpRollup(rollupOptions, rollupGenerateOptions)) | ||
| .pipe(createRollupBundle('es', 'material.js')) | ||
| .pipe(dest(path.join(DIST_COMPONENTS_ROOT, 'bundles'))); | ||
| }); | ||
|
|
||
| /** Builds components with resources (html, css) inlined into the built JS (ESM output). */ | ||
| /** Builds a UMD bundle (ES5) for all components. */ | ||
| task(':build:components:rollup:umd', () => { | ||
| return src(path.join(DIST_COMPONENTS_ROOT, 'index.js')) | ||
| .pipe(createRollupBundle('umd', 'material.umd.js')) | ||
| .pipe(dest(path.join(DIST_COMPONENTS_ROOT, 'bundles'))); | ||
| }); | ||
|
|
||
|
|
||
| /** Builds components with resources (html, css) inlined into the built JS. */ | ||
| task(':build:components:inline', sequenceTask( | ||
| [':build:components:ts', ':build:components:scss', ':build:components:assets'], | ||
| [':build:components:scss', ':build:components:assets'], | ||
| ':inline-resources', | ||
| )); | ||
|
|
||
| /** Builds components with minified HTML and CSS inlined into the built JS. */ | ||
| task(':build:components:inline:release', sequenceTask( | ||
| [':build:components:ts', ':build:components:scss', ':build:components:assets'], | ||
| ':build:components:assets:minify', | ||
| ':inline-resources' | ||
| )); | ||
|
|
||
| /** Inlines resources (html, css) into the JS output (for either ESM or CJS output). */ | ||
| /** Inlines resources (html, css) into the JS output. */ | ||
| task(':inline-resources', () => inlineResources(DIST_COMPONENTS_ROOT)); | ||
|
|
||
| /** Builds components to ESM output and UMD bundle. */ | ||
| task('build:components', sequenceTask(':build:components:inline', ':build:components:rollup')); | ||
| task('build:components:release', sequenceTask( | ||
| ':build:components:inline:release', ':build:components:rollup' | ||
| )); | ||
|
|
||
| /** Generates metadata.json files for all of the components. */ | ||
| task(':build:components:ngc', ['build:components:release'], execNodeTask( | ||
| task(':build:components:ngc', ['build:components'], execNodeTask( | ||
| '@angular/compiler-cli', 'ngc', ['-p', tsconfigPath] | ||
| )); | ||
|
|
||
| /** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */ | ||
| task(':watch:components', () => { | ||
| watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components', triggerLivereload]); | ||
| watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components', triggerLivereload]); | ||
| watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components', triggerLivereload]); | ||
| }); | ||
|
|
||
| const ROLLUP_GLOBALS = { | ||
| // Angular dependencies | ||
| '@angular/core': 'ng.core', | ||
| '@angular/common': 'ng.common', | ||
| '@angular/forms': 'ng.forms', | ||
| '@angular/http': 'ng.http', | ||
| '@angular/platform-browser': 'ng.platformBrowser', | ||
| '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic', | ||
|
|
||
| // Rxjs dependencies | ||
| 'rxjs/Subject': 'Rx', | ||
| 'rxjs/add/observable/fromEvent': 'Rx.Observable', | ||
| 'rxjs/add/observable/forkJoin': 'Rx.Observable', | ||
| 'rxjs/add/observable/of': 'Rx.Observable', | ||
| 'rxjs/add/observable/merge': 'Rx.Observable', | ||
| 'rxjs/add/observable/throw': 'Rx.Observable', | ||
| 'rxjs/add/operator/auditTime': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/toPromise': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/map': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/filter': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/do': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/share': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/finally': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/catch': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/first': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/startWith': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/switchMap': 'Rx.Observable.prototype', | ||
| 'rxjs/Observable': 'Rx' | ||
| }; | ||
|
|
||
| /** Creates a rollup bundles of the Material components.*/ | ||
| function createRollupBundle(format: string, outFile: string) { | ||
| let rollupOptions = { | ||
| context: 'this', | ||
| external: Object.keys(ROLLUP_GLOBALS) | ||
| }; | ||
|
|
||
| let rollupGenerateOptions = { | ||
| // Keep the moduleId empty because we don't want to force developers to a specific moduleId. | ||
| moduleId: '', | ||
| moduleName: 'ng.material', | ||
| banner: LICENSE_BANNER, | ||
| format: format, | ||
| dest: outFile, | ||
| globals: ROLLUP_GLOBALS, | ||
| }; | ||
|
|
||
| return gulpRollup(rollupOptions, rollupGenerateOptions); | ||
| } |
Oops, something went wrong.