chore: minify html and css for releases (#2262)

* chore: minify html and css for releases

* For releases, the HTML and CSS assets will be minified before being inlined into the built JS

* Remove comments in production html

package.json

@@ -63,7 +63,10 @@
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-clean": "^0.3.2",
+    "gulp-clean-css": "^2.3.0",
     "gulp-cli": "^1.2.2",
+    "gulp-htmlmin": "^3.0.0",
+    "gulp-if": "^2.0.2",
     "gulp-markdown": "^1.2.0",
     "gulp-sass": "^2.3.2",
     "gulp-server-livereload": "^1.8.2",

tools/gulp/constants.ts

@@ -15,6 +15,11 @@ export const SASS_AUTOPREFIXER_OPTIONS = {
   cascade: false,
 };
 
+export const HTML_MINIFIER_OPTIONS = {
+  collapseWhitespace: true,
+  removeComments: true
+};
+
 export const NPM_VENDOR_FILES = [
   '@angular', 'core-js/client', 'hammerjs', 'rxjs', 'systemjs/dist', 'zone.js/dist'
 ];

tools/gulp/tasks/components.ts

@@ -1,13 +1,18 @@
-import {task, watch} from 'gulp';
+import {task, watch, src, dest} from 'gulp';
 import * as path from 'path';
 
-import {DIST_COMPONENTS_ROOT, PROJECT_ROOT, COMPONENTS_DIR} from '../constants';
+import {
+  DIST_COMPONENTS_ROOT, PROJECT_ROOT, COMPONENTS_DIR, HTML_MINIFIER_OPTIONS
+} from '../constants';
 import {sassBuildTask, tsBuildTask, execNodeTask, copyTask, sequenceTask} from '../task_helpers';
 import {writeFileSync} from 'fs';
 
 // No typings for these.
 const inlineResources = require('../../../scripts/release/inline-resources');
 const rollup = require('rollup').rollup;
+const gulpMinifyCss = require('gulp-clean-css');
+const gulpMinifyHtml = require('gulp-htmlmin');
+const gulpIf = require('gulp-if');
 
 
 // NOTE: there are two build "modes" in this file, based on which tsconfig is used.
@@ -23,9 +28,9 @@ const tsconfigPath = path.relative(PROJECT_ROOT, path.join(COMPONENTS_DIR, 'tsco
 
 /** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */
 task(':watch:components', () => {
-  watch(path.join(COMPONENTS_DIR, '**/*.ts'), [':build:components:rollup']);
-  watch(path.join(COMPONENTS_DIR, '**/*.scss'), [':build:components:rollup']);
-  watch(path.join(COMPONENTS_DIR, '**/*.html'), [':build:components:rollup']);
+  watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components']);
+  watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components']);
+  watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components']);
 });
 
 
@@ -41,11 +46,18 @@ task(':build:components:assets', copyTask([
   path.join(PROJECT_ROOT, 'README.md'),
 ], DIST_COMPONENTS_ROOT));
 
+/** 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)))
+    .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', [':build:components:inline'], () => {
+task(':build:components:rollup', () => {
   const globals: {[name: string]: string} = {
     // Angular dependencies
     '@angular/core': 'ng.core',
@@ -102,13 +114,23 @@ task(':build:components:inline', sequenceTask(
   ':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). */
 task(':inline-resources', () => inlineResources(DIST_COMPONENTS_ROOT));
 
 /** Builds components to ESM output and UMD bundle. */
-task('build:components', [':build:components:rollup']);
+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'], execNodeTask(
+task(':build:components:ngc', ['build:components:release'], execNodeTask(
   '@angular/compiler-cli', 'ngc', ['-p', tsconfigPath]
 ));

tools/gulp/tasks/development.ts

@@ -24,7 +24,7 @@ task(':watch:devapp', () => {
 
 
 task(':build:devapp:vendor', vendorTask());
-task(':build:devapp:ts', [':build:components:rollup'], tsBuildTask(appDir));
+task(':build:devapp:ts', ['build:components'], tsBuildTask(appDir));
 task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir));
 task(':build:devapp:assets', copyTask(appDir, outDir));
 task('build:devapp', buildAppTask('devapp'));