build: fix occasional sass errors when serving dev-app (#5820)

Ocassionally when serving the dev-app, SaSS errors will show up and complain about imports of other SaSS files. This happens because the dev-app builds the theme using SaSS (no prebuilt theme) and every time something changes in the theming files of Material, the dev-app needs to re-build their custom theme. At this point, the dev-app task just watches for changes and rebuilds the dev-app theme. This is problematic because the watch task is not debounced and it will start building the dev-app theme while the SaSS files are not ready yet.

tools/gulp/tasks/development.ts

@@ -1,8 +1,8 @@
-import {task, watch} from 'gulp';
+import {task} from 'gulp';
 import {tsBuildTask, copyTask, buildAppTask, serverTask} from '../util/task_helpers';
 import {join} from 'path';
 import {
-  buildConfig, copyFiles, buildScssTask, triggerLivereload, sequenceTask
+  buildConfig, copyFiles, buildScssTask, sequenceTask, watchFiles
 } from 'material2-build-tools';
 
 // These imports don't have any typings provided.
@@ -28,14 +28,14 @@ const appVendors = [
 const vendorGlob = `+(${appVendors.join('|')})/**/*.+(html|css|js|map)`;
 
 task(':watch:devapp', () => {
-  watch(join(appDir, '**/*.ts'), [':build:devapp:ts', triggerLivereload]);
-  watch(join(appDir, '**/*.scss'), [':build:devapp:scss', triggerLivereload]);
-  watch(join(appDir, '**/*.html'), [':build:devapp:assets', triggerLivereload]);
+  watchFiles(join(appDir, '**/*.ts'), [':build:devapp:ts']);
+  watchFiles(join(appDir, '**/*.scss'), [':build:devapp:scss']);
+  watchFiles(join(appDir, '**/*.html'), [':build:devapp:assets']);
 
   // The themes for the demo-app are built by the demo-app using the SCSS mixins from Material.
   // Therefore when the CSS files have been changed the SCSS mixins have been refreshed and
   // copied over. Rebuilt the theme CSS using the updated SCSS mixins.
-  watch(join(materialOutPath, '**/*.css'), [':build:devapp:scss', triggerLivereload]);
+  watchFiles(join(materialOutPath, '**/*.css'), [':build:devapp:scss']);
 });
 
 /** Path to the demo-app tsconfig file. */

tools/gulp/tasks/e2e.ts

@@ -1,8 +1,8 @@
-import {task, watch} from 'gulp';
+import {task} from 'gulp';
 import {join} from 'path';
 import {ngcBuildTask, copyTask, execNodeTask, serverTask} from '../util/task_helpers';
 import {copySync} from 'fs-extra';
-import {buildConfig, sequenceTask} from 'material2-build-tools';
+import {buildConfig, sequenceTask, watchFiles} from 'material2-build-tools';
 
 // There are no type definitions available for these imports.
 const gulpConnect = require('gulp-connect');
@@ -46,8 +46,8 @@ task('e2e-app:copy-assets', copyTask(assetsGlob, outDir));
 task('e2e-app:build-ts', ngcBuildTask(tsconfigPath));
 
 task(':watch:e2eapp', () => {
-  watch(join(appDir, '**/*.ts'), ['e2e-app:build']);
-  watch(join(appDir, '**/*.html'), ['e2e-app:copy-assets']);
+  watchFiles(join(appDir, '**/*.ts'), ['e2e-app:build'], false);
+  watchFiles(join(appDir, '**/*.html'), ['e2e-app:copy-assets'], false);
 });
 
 /** Ensures that protractor and webdriver are set up to run. */

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

@@ -1,4 +1,4 @@
-import {task, watch, src, dest} from 'gulp';
+import {task, src, dest} from 'gulp';
 import {join} from 'path';
 import {main as tsc} from '@angular/tsc-wrapped';
 import {buildConfig} from '../build-config';
@@ -7,7 +7,7 @@ import {buildPackageBundles} from '../build-bundles';
 import {inlineResourcesForDirectory} from '../inline-resources';
 import {buildScssTask} from './build-scss-task';
 import {sequenceTask} from './sequence-task';
-import {triggerLivereload} from './trigger-livereload';
+import {watchFiles} from './watch-files';
 
 // There are no type definitions available for these imports.
 const htmlmin = require('gulp-htmlmin');
@@ -108,6 +108,6 @@ export function createPackageBuildTasks(packageName: string, requiredPackages: s
    * Watch tasks, that will rebuild the package whenever TS, SCSS, or HTML files change.
    */
   task(`${packageName}:watch`, dependentWatchTasks, () => {
-    watch(join(packageRoot, '**/*.+(ts|scss|html)'), [`${packageName}:build`, triggerLivereload]);
+    watchFiles(join(packageRoot, '**/*.+(ts|scss|html)'), [`${packageName}:build`]);
   });
 }

tools/package-tools/gulp/watch-files.ts

@@ -0,0 +1,13 @@
+import {watch} from 'gulp';
+import {triggerLivereload} from './trigger-livereload';
+
+/** Options that will be passed to the watch function of Gulp.*/
+const gulpWatchOptions = { debounceDelay: 700 };
+
+/**
+ * Function that watches a set of file globs and runs given Gulp tasks if a given file changes.
+ * By default the livereload server will be also called on file change.
+ */
+export function watchFiles(fileGlob: string | string[], tasks: string[], livereload = true) {
+  watch(fileGlob, gulpWatchOptions, [...tasks, () => livereload && triggerLivereload()]);
+}

tools/package-tools/index.ts

@@ -9,3 +9,4 @@ export * from './gulp/build-tasks-gulp';
 export * from './gulp/build-scss-task';
 export * from './gulp/sequence-task';
 export * from './gulp/trigger-livereload';
+export * from './gulp/watch-files';