build: speed-up stylesheet building (#12426)

* Switches back from `dart-sass` to `node-sass` due to a pretty huge slow-down we noticed (can be revisited)
* No longer copies all SCSS files to the temporary `package` output just in favor of the demo-app (slows down unnecessarily). This now allows us to live-reload theme changes within a second.
* No longer rebuilds all package SCSS files twice for the ES5 output (rel: #7403)

Author: devversion

package-lock.json

@@ -84,14 +84,14 @@
     "gulp-cli": "^1.3.0",
     "gulp-connect": "^5.0.0",
     "gulp-conventional-changelog": "^1.1.3",
-    "gulp-dart-sass": "^0.9.0",
     "gulp-dom": "^0.9.17",
     "gulp-flatten": "^0.3.1",
     "gulp-highlight-files": "^0.0.5",
     "gulp-htmlmin": "^3.0.0",
     "gulp-if": "^2.0.2",
     "gulp-markdown": "^1.2.0",
     "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
     "gulp-transform": "^2.0.0",
     "gulp-util": "^3.0.8",
     "hammerjs": "^2.0.8",
@@ -111,6 +111,7 @@
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
     "moment": "^2.18.1",
+    "node-sass": "^4.5.3",
     "parse5": "^5.0.0",
     "protractor": "^5.2.0",
     "request": "^2.83.0",
@@ -119,7 +120,6 @@
     "rollup-plugin-alias": "^1.4.0",
     "rollup-plugin-node-resolve": "^3.0.3",
     "run-sequence": "^1.2.2",
-    "sass": "^1.10.1",
     "scss-bundle": "^2.0.1-beta.7",
     "selenium-webdriver": "^3.6.0",
     "sorcery": "^0.10.0",

package.json

@@ -1,4 +1,5 @@
-@import '../../dist/packages/material/core/theming/all-theme';
+@import '../lib/core/theming/all-theme';
+
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only

src/demo-app/theme.scss

@@ -1,8 +1,8 @@
-import {task} from 'gulp';
+import {task, dest} from 'gulp';
 import {tsBuildTask, copyTask, serverTask} from '../util/task_helpers';
 import {join} from 'path';
 import {
-  buildConfig, copyFiles, buildScssTask, sequenceTask, watchFiles
+  buildConfig, copyFiles, buildScssPipeline, sequenceTask, watchFiles
 } from 'material2-build-tools';
 import {
   cdkPackage,
@@ -43,53 +43,35 @@ const vendorGlob = `+(${appVendors.join('|')})/**/*.+(html|css|js|map)`;
 /** Glob that matches all assets that need to be copied to the output. */
 const assetsGlob = join(appDir, `**/*.+(html|css|svg|ico)`);
 
-task(':watch:devapp', () => {
-  watchFiles(join(appDir, '**/*.ts'), [':build:devapp:ts']);
-  watchFiles(join(appDir, '**/*.scss'), [':build:devapp:scss']);
-  watchFiles(join(appDir, '**/*.html'), [':build:devapp:assets']);
-
-  // Custom watchers for all packages that are used inside of the demo-app. This is necessary
-  // because we only want to build the changed package (using the build-no-bundles task).
-  watchFiles(join(cdkPackage.sourceDir, '**/*'), ['cdk:build-no-bundles']);
-  watchFiles(join(materialPackage.sourceDir, '**/!(*.scss)'), ['material:build-no-bundles']);
-  watchFiles(join(materialPackage.sourceDir, '**/*.scss'), [':build:devapp:material-with-styles']);
-  watchFiles(join(momentAdapterPackage.sourceDir, '**/*'),
-      ['material-moment-adapter:build-no-bundles']);
-  watchFiles(join(materialExperimentalPackage.sourceDir, '**/*'),
-      ['material-experimental:build-no-bundles']);
-  watchFiles(join(cdkExperimentalPackage.sourceDir, '**/*'),
-      ['cdk-experimental:build-no-bundles']);
-  watchFiles(join(examplesPackage.sourceDir, '**/*'), ['material-examples:build-no-bundles']);
-});
-
 /** Path to the demo-app tsconfig file. */
 const tsconfigPath = join(appDir, 'tsconfig-build.json');
 
 task(':build:devapp:ts', tsBuildTask(tsconfigPath));
-task(':build:devapp:scss', buildScssTask(outDir, appDir));
 task(':build:devapp:assets', copyTask(assetsGlob, outDir));
+task(':build:devapp:scss', () => buildScssPipeline(appDir).pipe(dest(outDir)));
 
 task(':serve:devapp', serverTask(outDir, true));
 
-// The themes for the demo-app are built by using the SCSS mixins from Material.
-// Therefore when SCSS files have been changed, the custom theme needs to be rebuilt.
-task(':build:devapp:material-with-styles', sequenceTask(
-  'material:build-no-bundles', ':build:devapp:scss'
-));
-
 task('build:devapp', sequenceTask(
   'cdk:build-no-bundles',
   'material:build-no-bundles',
   'cdk-experimental:build-no-bundles',
   'material-experimental:build-no-bundles',
   'material-moment-adapter:build-no-bundles',
-  'build-examples-module', // The examples module needs to be built before building examples package
+  'build-examples-module',
+  // The examples module needs to be manually built before building examples package because
+  // when using the `no-bundles` task, the package-specific pre-build tasks won't be executed.
   'material-examples:build-no-bundles',
   [':build:devapp:assets', ':build:devapp:scss', ':build:devapp:ts']
 ));
 
 task('serve:devapp', ['build:devapp'], sequenceTask([':serve:devapp', ':watch:devapp']));
 
+/*
+ * Development App deployment tasks. These can be used to run the dev-app outside of our
+ * serve task with a middleware. e.g. on Firebase hosting.
+ */
+
 /** Task that copies all vendors into the demo-app package. Allows hosting the app on firebase. */
 task('stage-deploy:devapp', ['build:devapp'], () => {
   copyFiles(join(projectDir, 'node_modules'), vendorGlob, join(outDir, 'node_modules'));
@@ -118,3 +100,40 @@ task('deploy:devapp', ['stage-deploy:devapp'], () => {
     .then(() => { console.log('Successfully deployed the demo-app to firebase'); process.exit(0); })
     .catch((err: any) => { console.log(err); process.exit(1); });
 });
+
+/*
+ * Development app watch task. This task ensures that only the packages that have been affected
+ * by a file-change are being rebuilt. This speeds-up development and makes working on Material
+ * easier.
+ */
+
+task(':watch:devapp', () => {
+  watchFiles(join(appDir, '**/*.ts'), [':build:devapp:ts']);
+  watchFiles(join(appDir, '**/*.scss'), [':build:devapp:scss']);
+  watchFiles(join(appDir, '**/*.html'), [':build:devapp:assets']);
+
+  // Custom watchers for all packages that are used inside of the demo-app. This is necessary
+  // because we only want to build the changed package (using the build-no-bundles task).
+
+  // CDK package watchers.
+  watchFiles(join(cdkPackage.sourceDir, '**/*'), ['cdk:build-no-bundles']);
+
+  // Material package watchers.
+  watchFiles(join(materialPackage.sourceDir, '**/!(*-theme).scss'), ['material:build-no-bundles']);
+  watchFiles(join(materialPackage.sourceDir, '**/*-theme.scss'), [':build:devapp:scss']);
+
+  // Moment adapter package watchers
+  watchFiles(join(momentAdapterPackage.sourceDir, '**/*'),
+    ['material-moment-adapter:build-no-bundles']);
+
+  // Material experimental package watchers
+  watchFiles(join(materialExperimentalPackage.sourceDir, '**/*'),
+    ['material-experimental:build-no-bundles']);
+
+  // CDK experimental package watchers
+  watchFiles(join(cdkExperimentalPackage.sourceDir, '**/*'),
+    ['cdk-experimental:build-no-bundles']);
+
+  // Example package watchers.
+  watchFiles(join(examplesPackage.sourceDir, '**/*'), ['material-examples:build-no-bundles']);
+});