build: scss changes not live-reloading (#4870)

* Sometimes the theme SCSS changes are not being reflected in the browser. This is because the demo-app theme is built from the SCSS mixins and those aren't rebuilt whenever CSS changes inside of Material.

Author: devversion

tools/gulp/tasks/development.ts

@@ -25,6 +25,11 @@ 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]);
+
+  // 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(DIST_MATERIAL, '**/*.css'), [':build:devapp:scss', triggerLivereload]);
 });
 
 /** Path to the demo-app tsconfig file. */

tools/gulp/util/task_helpers.ts

@@ -3,6 +3,7 @@ import * as fs from 'fs';
 import * as gulp from 'gulp';
 import * as path from 'path';
 import {PROJECT_ROOT} from '../build-config';
+import {yellow} from 'chalk';
 
 /* Those imports lack typings. */
 const gulpClean = require('gulp-clean');
@@ -177,7 +178,8 @@ export function serverTask(packagePath: string, livereload = true) {
 
 /** Triggers a reload when livereload is enabled and a gulp-connect server is running. */
 export function triggerLivereload() {
-  gulp.src('dist').pipe(gulpConnect.reload());
+  console.log(yellow('Server: Changes were detected and a livereload was triggered.'));
+  return gulp.src('dist').pipe(gulpConnect.reload());
 }