build: update to gulp 4 (#21445)

We still depend on Gulp for a couple of CI tasks, but we've been stuck on version 3.8 for
a while which doesn't support Node 12 and might break in other ways in the future.

These changes update us to version 4.0.2, account for the breaking changes and remove
some dependencies that have been replaced by functions in Gulp.

Author: crisbeto

package.json

@@ -96,7 +96,7 @@
     "@types/browser-sync": "^2.26.1",
     "@types/fs-extra": "^9.0.5",
     "@types/glob": "^5.0.36",
-    "@types/gulp": "3.8.32",
+    "@types/gulp": "4.0.7",
     "@types/inquirer": "^7.3.1",
     "@types/jasmine": "^3.5.4",
     "@types/marked": "^1.2.1",
@@ -106,7 +106,6 @@
     "@types/node-fetch": "^2.5.5",
     "@types/parse5": "^5.0.0",
     "@types/resize-observer-browser": "^0.1.3",
-    "@types/run-sequence": "^0.0.30",
     "@types/semver": "^7.3.4",
     "@types/send": "^0.14.5",
     "@types/stylelint": "^9.10.1",
@@ -122,9 +121,8 @@
     "firebase-tools": "^8.16.1",
     "fs-extra": "^9.0.1",
     "glob": "^7.1.2",
-    "gulp": "^3.9.1",
-    "gulp-clean": "^0.4.0",
-    "gulp-cli": "^2.0.1",
+    "gulp": "^4.0.2",
+    "gulp-cli": "^2.3.0",
     "gulp-sass": "^4.0.2",
     "highlight.js": "^10.4.0",
     "husky": "^4.3.0",
@@ -157,7 +155,6 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "run-sequence": "^1.2.2",
     "sass": "^1.29.0",
     "scss-bundle": "^3.1.2",
     "selenium-webdriver": "^3.6.0",
@@ -176,8 +173,7 @@
     "yaml": "^1.10.0"
   },
   "resolutions": {
-    "dgeni-packages/typescript": "4.1.2",
-    "**/graceful-fs": "4.2.2"
+    "dgeni-packages/typescript": "4.1.2"
   },
   "husky": {
     "hooks": {

tools/gulp/gulpfile.ts

@@ -9,10 +9,7 @@ import {
   youTubePlayerPackage
 } from './packages';
 
-import './tasks/ci';
-import './tasks/clean';
-import './tasks/unit-test';
-
+// Build tasks have to be imported first, because the other tasks depend on them.
 createPackageBuildTasks(cdkPackage);
 createPackageBuildTasks(cdkExperimentalPackage);
 createPackageBuildTasks(materialPackage);
@@ -21,3 +18,6 @@ createPackageBuildTasks(momentAdapterPackage);
 createPackageBuildTasks(youTubePlayerPackage);
 createPackageBuildTasks(googleMapsPackage);
 
+import './tasks/clean';
+import './tasks/unit-test';
+import './tasks/ci';

tools/gulp/tasks/ci.ts

@@ -1,5 +1,8 @@
-import {task} from 'gulp';
+import {task, series} from 'gulp';
 
 // Gulp sometimes does not exit properly on CI. This is to prevent that.
 // TODO(devversion): look if there is some blocking child process.
-task('ci:test', ['test:single-run'], () => process.exit(0));
+task('ci:test', series('test:single-run', done => {
+  done();
+  process.exit(0);
+}));

tools/gulp/tasks/clean.ts

@@ -1,8 +1,10 @@
-import {task, src} from 'gulp';
+import {task} from 'gulp';
 import {buildConfig} from '../../package-tools';
 
-// This import lacks type definitions.
-const gulpClean = require('gulp-clean');
+const shelljs = require('shelljs');
 
 /** Deletes the output directory. */
-task('clean', () => src(buildConfig.outputDir, { read: false }).pipe(gulpClean(null)));
+task('clean', done => {
+  shelljs.rm('-rf', [buildConfig.outputDir]);
+  done();
+});

tools/gulp/tasks/unit-test.ts

@@ -1,12 +1,26 @@
 import {join} from 'path';
-import {task} from 'gulp';
-import {buildConfig, sequenceTask} from '../../package-tools';
+import {task, series} from 'gulp';
+import {buildConfig} from '../../package-tools';
 
 // There are no type definitions available for these imports.
 const shelljs = require('shelljs');
 
+/**
+ * Tasks that builds the SystemJS configuration which is needed for the Karma
+ * legacy unit tests.
+ */
+task(':test:build-system-config', done => {
+  const configOutputPath = join(buildConfig.outputDir, 'karma-system-config.js');
+  shelljs.cd(buildConfig.projectDir);
+  const bazelGenfilesDir = shelljs.exec('yarn -s bazel info bazel-genfiles').stdout.trim();
+  shelljs.exec('yarn -s bazel build //test:system-config.js');
+  shelljs.cp(join(bazelGenfilesDir, 'test/system-config.js'), configOutputPath);
+  shelljs.chmod('u+w', configOutputPath);
+  done();
+});
+
 /** Builds everything that is necessary for karma. */
-task(':test:build', sequenceTask(
+task(':test:build', series(
   'clean',
   'cdk:build-no-bundles',
   'material:build-no-bundles',
@@ -22,7 +36,7 @@ task(':test:build', sequenceTask(
  * Runs the unit tests. Does not watch for changes.
  * This task should be used when running tests on the CI server.
  */
-task('test:single-run', [':test:build'], (done: () => void) => {
+task('test:single-run', series(':test:build', done => {
   // Load karma not outside. Karma pollutes Promise with a different implementation.
   const karma = require('karma');
 
@@ -31,21 +45,13 @@ task('test:single-run', [':test:build'], (done: () => void) => {
     autoWatch: false,
     singleRun: true
   }, (exitCode: number) => {
-    // Immediately exit the process if Karma reported errors, because due to
-    // potential still running tunnel-browsers gulp won't exit properly.
-    exitCode === 0 ? done() : process.exit(exitCode);
+    if (exitCode === 0) {
+      done();
+    } else {
+      // Immediately exit the process if Karma reported errors, because due to
+      // potential still running tunnel-browsers gulp won't exit properly.
+      done(`Karma exited with code ${exitCode}.`);
+      process.exit(exitCode);
+    }
   }).start();
-});
-
-/**
- * Tasks that builds the SystemJS configuration which is needed for the Karma
- * legacy unit tests.
- */
-task(':test:build-system-config', () => {
-  const configOutputPath = join(buildConfig.outputDir, 'karma-system-config.js');
-  shelljs.cd(buildConfig.projectDir);
-  const bazelGenfilesDir = shelljs.exec('yarn -s bazel info bazel-genfiles').stdout.trim();
-  shelljs.exec('yarn -s bazel build //test:system-config.js');
-  shelljs.cp(join(bazelGenfilesDir, 'test/system-config.js'), configOutputPath);
-  shelljs.chmod('u+w', configOutputPath);
-});
+}));

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

@@ -1,16 +1,15 @@
-import {dest, src, task} from 'gulp';
+import {dest, src, task, series} from 'gulp';
 import {join} from 'path';
 import {BuildPackage} from '../build-package';
 import {inlineResourcesForDirectory} from '../inline-resources';
 import {buildScssPipeline} from './build-scss-pipeline';
-import {sequenceTask} from './sequence-task';
 
 /**
  * Creates a set of gulp tasks that can build the specified package.
  * @param buildPackage Build package for which the gulp tasks will be generated
  * @param preBuildTasks List of gulp tasks that should run before building the package.
  */
-export function createPackageBuildTasks(buildPackage: BuildPackage, preBuildTasks: string[] = []) {
+export function createPackageBuildTasks(buildPackage: BuildPackage) {
   // Name of the package build tasks for Gulp.
   const taskName = buildPackage.name;
 
@@ -26,49 +25,36 @@ export function createPackageBuildTasks(buildPackage: BuildPackage, preBuildTask
   // Glob that matches every HTML file in the current package.
   const htmlGlob = join(buildPackage.sourceDir, '**/*.html');
 
-  task(`${taskName}:build-no-bundles`, sequenceTask(
-    // Build assets before building the ESM output. Since we compile with NGC, the compiler
-    // tries to resolve all required assets.
-    `${taskName}:assets`,
-    // Build the ESM output that includes all test files. Also build assets for the package.
-    `${taskName}:build:esm:tests`,
-    // Inline assets into ESM output.
-    `${taskName}:assets:inline`
-  ));
-
-  /**
-   * TypeScript compilation tasks. Tasks are creating ESM, FESM, UMD bundles for releases.
-   */
-
-  task(`${taskName}:build:esm:tests`, () => buildPackage.compileTests());
+  task(`${taskName}:assets:scss`, () =>
+    buildScssPipeline(buildPackage.sourceDir).pipe(dest(buildPackage.outputDir)));
+  task(`${taskName}:assets:copy-styles`, () => src(styleGlobs).pipe(dest(buildPackage.outputDir)));
+  task(`${taskName}:assets:html`, () => src(htmlGlob).pipe(dest(buildPackage.outputDir)));
+  task(`${taskName}:assets:inline`, done => {
+    inlineResourcesForDirectory(buildPackage.outputDir);
+    done();
+  });
 
   /**
    * Asset tasks. Building Sass files and inlining CSS, HTML files into the ESM output.
    */
-  const assetTasks = [
+  task(`${taskName}:assets`, series(
     `${taskName}:assets:scss`,
     `${taskName}:assets:copy-styles`,
     `${taskName}:assets:html`
-  ];
-
-  task(`${taskName}:assets`, assetTasks);
-
-  task(`${taskName}:assets:scss`, () => {
-    return buildScssPipeline(buildPackage.sourceDir)
-      .pipe(dest(buildPackage.outputDir));
-    }
-  );
-
-  task(`${taskName}:assets:copy-styles`, () => {
-    return src(styleGlobs)
-        .pipe(dest(buildPackage.outputDir));
-  });
+  ));
 
-  task(`${taskName}:assets:html`, () => {
-    return src(htmlGlob).pipe(dest(buildPackage.outputDir));
-  });
+  /**
+   * TypeScript compilation tasks. Tasks are creating ESM, FESM, UMD bundles for releases.
+   */
+  task(`${taskName}:build:esm:tests`, () => buildPackage.compileTests());
 
-  task(`${taskName}:assets:inline`, () => {
-    return inlineResourcesForDirectory(buildPackage.outputDir);
-  });
+  task(`${taskName}:build-no-bundles`, series(
+    // Build assets before building the ESM output. Since we compile with NGC, the compiler
+    // tries to resolve all required assets.
+    `${taskName}:assets`,
+    // Build the ESM output that includes all test files. Also build assets for the package.
+    `${taskName}:build:esm:tests`,
+    // Inline assets into ESM output.
+    `${taskName}:assets:inline`
+  ));
 }

tools/package-tools/gulp/sequence-task.ts

@@ -6,4 +6,3 @@ export * from './inline-resources';
 // Expose gulp utilities.
 export * from './gulp/build-tasks-gulp';
 export * from './gulp/build-scss-pipeline';
-export * from './gulp/sequence-task';