feat(build): speed-up stylesheet building

tools/gulp/tasks/mosaic-release.ts

@@ -16,8 +16,9 @@ const {sourceDir, outputDir} = mosaicPackage;
 /** Path to the directory where all releases are created. */
 const releasesDir = join(distDir, 'releases');
 
-// Matches all SCSS files in the different packages.
-const allScssGlob = join(buildConfig.packagesDir, '**/*.scss');
+// Matches all SCSS files in the different packages. Note that this glob is not used to build
+// the bundle. It's used to identify Sass files that shouldn't be included multiple times.
+const allScssDedupeGlob = join(buildConfig.packagesDir, '**/*.scss');
 
 
 // Path to the release output of mosaic.
@@ -55,7 +56,7 @@ task('mosaic:bundle-theming-scss', () => {
     // Instantiates the SCSS bundler and bundles all imports of the specified entry point SCSS file.
     // A glob of all SCSS files in the library will be passed to the bundler. The bundler takes an
     // array of globs, which will match SCSS files that will be only included once in the bundle.
-    return new Bundler().Bundle(themingEntryPointPath, [allScssGlob]).then((result) => {
+    return new Bundler().Bundle(themingEntryPointPath, [allScssDedupeGlob]).then((result) => {
         // The release directory is not created yet because the composing of the release happens when
         // this task finishes.
         mkdirpSync(releasePath);
@@ -74,7 +75,7 @@ task('mosaic:bundle-visual-scss', () => {
     // Instantiates the SCSS bundler and bundles all imports of the specified entry point SCSS file.
     // A glob of all SCSS files in the library will be passed to the bundler. The bundler takes an
     // array of globs, which will match SCSS files that will be only included once in the bundle.
-    return new Bundler().Bundle(visualEntryPointPath, [allScssGlob]).then((result) => {
+    return new Bundler().Bundle(visualEntryPointPath, [allScssDedupeGlob]).then((result) => {
         // The release directory is not created yet because the composing of the release happens when
         // this task finishes.
         mkdirpSync(releasePath);

tools/packages/gulp/build-scss-pipeline.ts

@@ -0,0 +1,15 @@
+import { src } from 'gulp';
+import { join } from 'path';
+
+
+/* tslint:disable:no-var-requires */
+const gulpSass = require('gulp-sass');
+const gulpIf = require('gulp-if');
+const gulpCleanCss = require('gulp-clean-css');
+/* tslint:enable:no-var-requires */
+
+export function buildScssPipeline(sourceDir: string, minifyOutput = false) {
+    return src(join(sourceDir, '**/*.scss'))
+        .pipe(gulpSass().on('error', gulpSass.logError))
+        .pipe(gulpIf(minifyOutput, gulpCleanCss()));
+}

tools/packages/gulp/build-tasks-gulp.ts

@@ -6,7 +6,7 @@ import { inlineResourcesForDirectory } from '../inline-resources';
 
 import { composeRelease } from '../build-release';
 
-import { buildScssTask } from './build-scss-task';
+import { buildScssPipeline } from './build-scss-pipeline';
 import { sequenceTask } from './sequence-task';
 
 
@@ -29,7 +29,7 @@ export function createPackageBuildTasks(buildPackage: BuildPackage, preBuildTask
     const dependencyNames = buildPackage.dependencies.map((p) => p.name);
 
     // Glob that matches all style files that need to be copied to the package output.
-    const stylesGlob = join(buildPackage.sourceDir, '**/*.+(scss|css)');
+    const stylesGlob = join(buildPackage.sourceDir, '**/*.css');
 
     // Glob that matches every HTML file in the current package.
     const htmlGlob = join(buildPackage.sourceDir, '**/*.html');
@@ -68,17 +68,15 @@ export function createPackageBuildTasks(buildPackage: BuildPackage, preBuildTask
 
     task(`${taskName}:assets`, [
         `${taskName}:assets:scss`,
-        `${taskName}:assets:es5-scss`,
         `${taskName}:assets:copy-styles`,
         `${taskName}:assets:html`
     ]);
 
-    task(`${taskName}:assets:scss`, buildScssTask(
-        buildPackage.outputDir, buildPackage.sourceDir, true)
-    );
-
-    task(`${taskName}:assets:es5-scss`, buildScssTask(
-        buildPackage.esm5OutputDir, buildPackage.sourceDir, true)
+    task(`${taskName}:assets:scss`, () => {
+        buildScssPipeline(buildPackage.sourceDir, true)
+            .pipe(dest(buildPackage.outputDir))
+            .pipe(dest(buildPackage.esm5OutputDir));
+        }
     );
 
     task(`${taskName}:assets:copy-styles`, () => {

tools/packages/index.ts

@@ -6,5 +6,5 @@ export * from './copy-files';
 
 
 export * from './gulp/build-tasks-gulp';
-export * from './gulp/build-scss-task';
+export * from './gulp/build-scss-pipeline';
 export * from './gulp/sequence-task';