From 1847819de150f3ef98272ce471fe017b1603d1ee Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 30 May 2017 18:27:31 +0200 Subject: [PATCH] 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. --- tools/gulp/tasks/development.ts | 5 +++++ tools/gulp/util/task_helpers.ts | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts index 1dd393f8f3c..17e80bbddf3 100644 --- a/tools/gulp/tasks/development.ts +++ b/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. */ diff --git a/tools/gulp/util/task_helpers.ts b/tools/gulp/util/task_helpers.ts index 28a5eba7309..e8c9e35d11a 100644 --- a/tools/gulp/util/task_helpers.ts +++ b/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()); }