chore(dev-app): prevent multiple reloads per file change (#1762)

Prevents the local dev app from reloading 5-6 times whenever a file changes. Adds a filter that only watches for the bundle (which also contains all of the CSS and HTML), theme changes and changes to the demo apps.

Fixes #1681.

Author: crisbeto

tools/gulp/task_helpers.ts

@@ -185,10 +185,15 @@ export function vendorTask() {
     }));
 }
 
+export type livereloadOptions = boolean | {
+  enable: boolean;
+  filter: (filename: string, callback: (isAllowed: boolean) => void) => void;
+}
 
 /** Create a task that serves the dist folder. */
-export function serverTask(liveReload = true,
+export function serverTask(liveReload: livereloadOptions = true,
                            streamCallback: (stream: NodeJS.ReadWriteStream) => void = null) {
+
   return () => {
     const stream = gulp.src('dist').pipe(gulpServer({
       livereload: liveReload,

tools/gulp/tasks/development.ts

@@ -10,7 +10,11 @@ import {
 
 const appDir = path.join(SOURCE_ROOT, 'demo-app');
 const outDir = DIST_ROOT;
-
+const LIVERELOAD_PATTERNS = [
+  /material\.umd\.js$/,
+  /-demo\.[a-z]+$/,
+  /\/theming\/prebuilt/
+];
 
 task(':watch:devapp', () => {
   watch(path.join(appDir, '**/*.ts'), [':build:devapp:ts']);
@@ -25,7 +29,13 @@ task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, app
 task(':build:devapp:assets', copyTask(appDir, outDir));
 task('build:devapp', buildAppTask('devapp'));
 
-task(':serve:devapp', serverTask());
+task(':serve:devapp', serverTask({
+  enable: true,
+  filter: (filename: string, callback: Function) => {
+    callback(LIVERELOAD_PATTERNS.some(pattern => pattern.test(filename)));
+  }
+}));
+
 task('serve:devapp', ['build:devapp'], sequenceTask(
   [':serve:devapp', ':watch:components', ':watch:devapp']
 ));