Skip to content

Commit 3019117

Browse files
devversiondevversion
committed
Updates
1 parent b3e973e commit 3019117

10 files changed

+144
-115
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"@types/node": "^7.0.4",
5252
"@types/run-sequence": "^0.0.28",
5353
"@types/rx": "2.5.33",
54+
"autoprefixer": "^6.7.6",
5455
"axe-core": "^2.1.7",
5556
"axe-webdriverjs": "^0.5.0",
5657
"conventional-changelog": "^1.1.0",
@@ -62,7 +63,6 @@
6263
"glob": "^7.1.1",
6364
"google-cloud": "^0.45.1",
6465
"gulp": "^3.9.1",
65-
"gulp-autoprefixer": "^3.1.1",
6666
"gulp-better-rollup": "^1.0.2",
6767
"gulp-clean": "^0.3.2",
6868
"gulp-clean-css": "^2.3.2",
@@ -73,6 +73,7 @@
7373
"gulp-htmlmin": "^3.0.0",
7474
"gulp-if": "^2.0.2",
7575
"gulp-markdown": "^1.2.0",
76+
"gulp-postcss": "^6.3.0",
7677
"gulp-rename": "^1.2.2",
7778
"gulp-sass": "^3.1.0",
7879
"gulp-sourcemaps": "^2.4.0",

‎src/lib/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "2.0.0-beta.2",
44
"description": "Angular Material",
55
"main": "./bundles/material.umd.js",
6-
"module": "./bundles/material.js",
6+
"module": "./index.js",
77
"typings": "./index.d.ts",
88
"repository": {
99
"type": "git",

‎src/lib/tsconfig-es5.json renamed to ‎src/lib/tsconfig-build.json

+2-4
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,17 @@
44
"emitDecoratorMetadata": true,
55
"experimentalDecorators": true,
66
"lib": ["es6", "es2015", "dom"],
7-
"module": "commonjs",
7+
"module": "es2015",
88
"moduleResolution": "node",
99
"noEmitOnError": true,
1010
"noImplicitAny": true,
1111
"outDir": "../../dist/@angular/material",
1212
"rootDir": ".",
1313
"sourceMap": true,
14-
"target": "es5",
14+
"target": "es6",
1515
"inlineSources": true,
1616
"stripInternal": false,
1717
"baseUrl": "",
18-
"paths": {
19-
},
2018
"typeRoots": [
2119
"../../node_modules/@types/!(node)"
2220
],

‎src/lib/tsconfig-es6.json

-33
This file was deleted.

‎tools/gulp/task_helpers.ts

+16-9
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,24 @@ import * as fs from 'fs';
33
import * as gulp from 'gulp';
44
import * as path from 'path';
55
import {NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS} from './constants';
6+
import {compileProject} from './util/ts-compiler';
7+
import {CompilerOptions} from 'typescript';
68

7-
8-
/** Those imports lack typings. */
9+
/* Those imports lack typings. */
910
const gulpClean = require('gulp-clean');
1011
const gulpMerge = require('merge2');
1112
const gulpRunSequence = require('run-sequence');
1213
const gulpSass = require('gulp-sass');
1314
const gulpSourcemaps = require('gulp-sourcemaps');
14-
const gulpAutoprefixer = require('gulp-autoprefixer');
15+
const gulpPostcss = require('gulp-postcss');
1516
const gulpConnect = require('gulp-connect');
17+
const gulpIf = require('gulp-if');
18+
const gulpCleanCss = require('gulp-clean-css');
19+
1620
const resolveBin = require('resolve-bin');
1721
const firebaseAdmin = require('firebase-admin');
1822
const gcloud = require('google-cloud');
19-
23+
const autoprefixer = require('autoprefixer');
2024

2125
/** If the string passed in is a glob, returns it, otherwise append '**\/*' to it. */
2226
function _globify(maybeGlob: string, suffix = '**/*') {
@@ -34,18 +38,21 @@ function _globify(maybeGlob: string, suffix = '**/*') {
3438

3539

3640
/** Creates a task that runs the TypeScript compiler */
37-
export function tsBuildTask(tsConfigPath: string) {
38-
return execNodeTask('typescript', 'tsc', ['-p', tsConfigPath]);
41+
export function tsBuildTask(tsConfigPath: string, extraOptions?: CompilerOptions) {
42+
return () => {
43+
compileProject(tsConfigPath, extraOptions);
44+
};
3945
}
4046

4147

4248
/** Create a SASS Build Task. */
43-
export function sassBuildTask(dest: string, root: string) {
49+
export function sassBuildTask(dest: string, root: string, minify = false) {
4450
return () => {
4551
return gulp.src(_globify(root, '**/*.scss'))
46-
.pipe(gulpSourcemaps.init())
52+
.pipe(gulpSourcemaps.init({ loadMaps: true }))
4753
.pipe(gulpSass().on('error', gulpSass.logError))
48-
.pipe(gulpAutoprefixer(SASS_AUTOPREFIXER_OPTIONS))
54+
.pipe(gulpPostcss([autoprefixer(SASS_AUTOPREFIXER_OPTIONS)]))
55+
.pipe(gulpIf(minify, gulpCleanCss()))
4956
.pipe(gulpSourcemaps.write('.'))
5057
.pipe(gulp.dest(dest));
5158
};

‎tools/gulp/tasks/aot.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ task('aot:copy', [':build:devapp:scss', ':build:devapp:assets']);
1212
*/
1313
task('aot:prepare', sequenceTask(
1414
'clean',
15-
['aot:copy', 'build:components:release', ':build:components:ngc'])
15+
['aot:copy', 'build:components', ':build:components:ngc'])
1616
);
1717

1818
/** Builds the demo-app with the Angular compiler to verify that all components work. */

‎tools/gulp/tasks/components.ts

+63-63
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,104 @@
11
import {task, watch, src, dest} from 'gulp';
2+
import {ScriptTarget, ModuleKind} from 'typescript';
23
import * as path from 'path';
34

45
import {
56
DIST_COMPONENTS_ROOT, PROJECT_ROOT, COMPONENTS_DIR, HTML_MINIFIER_OPTIONS, LICENSE_BANNER
67
} from '../constants';
78
import {
8-
sassBuildTask, tsBuildTask, execNodeTask, copyTask, sequenceTask,
9+
sassBuildTask, tsBuildTask, execNodeTask, sequenceTask,
910
triggerLivereload
1011
} from '../task_helpers';
1112

12-
// No typings for these.
13+
// These imports lack of types.
1314
const inlineResources = require('../../../scripts/release/inline-resources');
1415
const gulpRollup = require('gulp-better-rollup');
15-
const gulpMinifyCss = require('gulp-clean-css');
1616
const gulpMinifyHtml = require('gulp-htmlmin');
1717
const gulpIf = require('gulp-if');
18-
const merge2 = require('merge2');
1918

19+
/** Path to tsconfig file for the components. */
20+
const tsconfigPath = path.join(COMPONENTS_DIR, 'tsconfig-build.json');
2021

21-
// NOTE: there are two build "modes" in this file, based on which tsconfig is used.
22-
// When `tsconfig.json` is used, we are outputting ES6 modules and a UMD bundle. This is used
23-
// for serving and for release.
24-
//
25-
// When `tsconfig-spec.json` is used, we are outputting CommonJS modules. This is used
26-
// for unit tests (karma).
22+
/** Asset files to be added to the components output. */
23+
const assetFiles = [
24+
path.join(COMPONENTS_DIR, '**/*.html'),
25+
path.join(COMPONENTS_DIR, 'package.json'),
26+
path.join(PROJECT_ROOT, 'README.md'),
27+
path.join(PROJECT_ROOT, 'LICENSE'),
28+
];
2729

28-
/** Path to the different tsconfig files. */
29-
const tsconfigES6 = path.join(COMPONENTS_DIR, 'tsconfig-es6.json');
30-
const tsconfigES5 = path.join(COMPONENTS_DIR, 'tsconfig-es5.json');
31-
32-
/** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */
33-
task(':watch:components', () => {
34-
watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components', triggerLivereload]);
35-
watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components', triggerLivereload]);
36-
watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components', triggerLivereload]);
37-
});
30+
/** Builds components to UMD bundle. */
31+
task('build:components', [':build:components:bundle:umd']);
3832

33+
/** Builds components for Angular Material releases */
34+
task(':build:components:release', sequenceTask(
35+
':build:components:bundle:umd',
36+
':build:components:bundle:es',
37+
':build:components:ngc'
38+
));
3939

40-
/** Builds component typescript only (ES6 output). */
41-
task(':build:components:ts', tsBuildTask(tsconfigES6));
40+
/** Builds components typescript in ES5, ES6 target. For specs Karma needs CJS output. */
41+
task(':build:components:ts:es5', tsBuildTask(tsconfigPath, { target: ScriptTarget.ES5 }));
42+
task(':build:components:ts:es6', tsBuildTask(tsconfigPath, { target: ScriptTarget.ES6 }));
43+
task(':build:components:ts:spec', tsBuildTask(tsconfigPath, {
44+
target: ScriptTarget.ES5, module: ModuleKind.CommonJS
45+
}));
4246

43-
/** Builds components typescript for tests (ES5 output). */
44-
task(':build:components:spec', tsBuildTask(tsconfigES5));
47+
/** Tasks to create a UMD or ES bundle */
48+
task(':build:components:bundle:umd', sequenceTask(
49+
':build:components:ts:es5', ':build:components:inline', ':build:components:rollup:umd'
50+
));
4551

46-
/** Copies assets (html, markdown) to build output. */
47-
task(':build:components:assets', copyTask([
48-
path.join(COMPONENTS_DIR, '**/*.!(ts|spec.ts)'),
49-
path.join(PROJECT_ROOT, 'README.md'),
50-
path.join(PROJECT_ROOT, 'LICENSE'),
51-
], DIST_COMPONENTS_ROOT));
52+
task(':build:components:bundle:es', sequenceTask(
53+
':build:components:ts:es6', ':build:components:inline', ':build:components:rollup:es'
54+
));
5255

53-
/** Minifies the HTML and CSS assets in the distribution folder. */
54-
task(':build:components:assets:minify', () => {
55-
return src('**/*.+(html|css)', { cwd: DIST_COMPONENTS_ROOT})
56-
.pipe(gulpIf(/.css$/, gulpMinifyCss(), gulpMinifyHtml(HTML_MINIFIER_OPTIONS)))
56+
/** Copies all component assets to the build output. */
57+
task(':build:components:assets', () => {
58+
return src(assetFiles)
59+
.pipe(gulpIf(/.html$/, gulpMinifyHtml(HTML_MINIFIER_OPTIONS)))
5760
.pipe(dest(DIST_COMPONENTS_ROOT));
5861
});
5962

60-
/** Builds scss into css. */
61-
task(':build:components:scss', sassBuildTask(DIST_COMPONENTS_ROOT, COMPONENTS_DIR));
62-
63-
/** Builds the UMD bundle for all of Angular Material. */
64-
task(':build:components:rollup', () => {
65-
let esBundle = src(path.join(DIST_COMPONENTS_ROOT, 'index.js'))
66-
.pipe(createRollupBundle('es', 'material.js'));
63+
/** Compiles the components SCSS into minified CSS. */
64+
task(':build:components:scss', sassBuildTask(DIST_COMPONENTS_ROOT, COMPONENTS_DIR, true));
6765

68-
let umdBundle = src(path.join(DIST_COMPONENTS_ROOT, 'index.js'))
69-
.pipe(createRollupBundle('umd', 'material.umd.js'));
70-
71-
return merge2(esBundle, umdBundle)
66+
/** Builds a ES6 bundle for all components. */
67+
task(':build:components:rollup:es', () => {
68+
return src(path.join(DIST_COMPONENTS_ROOT, 'index.js'))
69+
.pipe(createRollupBundle('es', 'material.js'))
7270
.pipe(dest(path.join(DIST_COMPONENTS_ROOT, 'bundles')));
7371
});
7472

75-
/** Builds components with resources (html, css) inlined into the built JS (ESM output). */
73+
/** Builds a UMD bundle (ES5) for all components. */
74+
task(':build:components:rollup:umd', () => {
75+
return src(path.join(DIST_COMPONENTS_ROOT, 'index.js'))
76+
.pipe(createRollupBundle('umd', 'material.umd.js'))
77+
.pipe(dest(path.join(DIST_COMPONENTS_ROOT, 'bundles')));
78+
});
79+
80+
81+
/** Builds components with resources (html, css) inlined into the built JS. */
7682
task(':build:components:inline', sequenceTask(
77-
[':build:components:ts', ':build:components:scss', ':build:components:assets'],
83+
[':build:components:scss', ':build:components:assets'],
7884
':inline-resources',
7985
));
8086

81-
/** Builds components with minified HTML and CSS inlined into the built JS. */
82-
task(':build:components:inline:release', sequenceTask(
83-
[':build:components:ts', ':build:components:scss', ':build:components:assets'],
84-
':build:components:assets:minify',
85-
':inline-resources'
86-
));
87-
88-
/** Inlines resources (html, css) into the JS output (for either ESM or CJS output). */
87+
/** Inlines resources (html, css) into the JS output. */
8988
task(':inline-resources', () => inlineResources(DIST_COMPONENTS_ROOT));
9089

91-
/** Builds components to ESM output and UMD bundle. */
92-
task('build:components', sequenceTask(':build:components:inline', ':build:components:rollup'));
93-
task('build:components:release', sequenceTask(
94-
':build:components:inline:release', ':build:components:rollup'
95-
));
96-
9790
/** Generates metadata.json files for all of the components. */
98-
task(':build:components:ngc', ['build:components:release'], execNodeTask(
99-
'@angular/compiler-cli', 'ngc', ['-p', tsconfigES6]
91+
task(':build:components:ngc', ['build:components'], execNodeTask(
92+
'@angular/compiler-cli', 'ngc', ['-p', tsconfigPath]
10093
));
10194

95+
/** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */
96+
task(':watch:components', () => {
97+
watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components', triggerLivereload]);
98+
watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components', triggerLivereload]);
99+
watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components', triggerLivereload]);
100+
});
101+
102102
const ROLLUP_GLOBALS = {
103103
// Angular dependencies
104104
'@angular/core': 'ng.core',

‎tools/gulp/tasks/release.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ task('build:release', function(done: () => void) {
1919
// Synchronously run those tasks.
2020
gulpRunSequence(
2121
'clean',
22-
':build:components:ngc',
22+
':build:components:release',
2323
':build:release:clean-spec',
2424
done
2525
);

‎tools/gulp/tasks/unit-test.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ gulp.task(':test:deps', sequenceTask(
2929
':build:test:vendor',
3030
':build:components:assets',
3131
':build:components:scss',
32-
':build:components:spec',
32+
':build:components:ts:spec',
3333
]
3434
));
3535

@@ -84,7 +84,7 @@ gulp.task('test', [':test:deps'], () => {
8484
server.on('browser_register', runTests);
8585

8686
// Watch for file changes, rebuild and run the tests.
87-
gulp.watch(patternRoot + '.ts', () => runSequence(':build:components:spec', runTests));
87+
gulp.watch(patternRoot + '.ts', () => runSequence(':build:components:ts:spec', runTests));
8888
gulp.watch(patternRoot + '.scss', () => runSequence(':build:components:scss', runTests));
8989
gulp.watch(patternRoot + '.html', () => runSequence(':build:components:assets', runTests));
9090
});

0 commit comments

Comments
 (0)