From e14e7afa0380c32363bf31eb4bda5654b1a7c2b1 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Mon, 17 Jul 2017 19:55:49 +0200 Subject: [PATCH] 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 | 12 ++++++------ tools/gulp/tasks/e2e.ts | 8 ++++---- tools/package-tools/gulp/build-tasks-gulp.ts | 6 +++--- tools/package-tools/gulp/watch-files.ts | 13 +++++++++++++ tools/package-tools/index.ts | 1 + 5 files changed, 27 insertions(+), 13 deletions(-) create mode 100644 tools/package-tools/gulp/watch-files.ts diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts index 1812ea35db5..5d350ced564 100644 --- a/tools/gulp/tasks/development.ts +++ b/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. */ diff --git a/tools/gulp/tasks/e2e.ts b/tools/gulp/tasks/e2e.ts index 236f6ee2208..d4932a9ef82 100644 --- a/tools/gulp/tasks/e2e.ts +++ b/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. */ diff --git a/tools/package-tools/gulp/build-tasks-gulp.ts b/tools/package-tools/gulp/build-tasks-gulp.ts index 2aba601d0d7..255a25348dc 100644 --- a/tools/package-tools/gulp/build-tasks-gulp.ts +++ b/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`]); }); } diff --git a/tools/package-tools/gulp/watch-files.ts b/tools/package-tools/gulp/watch-files.ts new file mode 100644 index 00000000000..174badf9caa --- /dev/null +++ b/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()]); +} diff --git a/tools/package-tools/index.ts b/tools/package-tools/index.ts index 60b77fdcb2b..0a2e65bd6d6 100644 --- a/tools/package-tools/index.ts +++ b/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';