Refactor sass watching so page reloads (palantir#319)

docs.scss imports all the compiled CSS files, which then get processed into docs.css. Changing a downstream package SCSS file (like `_buttons.scss`) updates blueprint.css but docs.scss does not pick up those changes. this refactors sass and typescript watching to actually ignore generated files and adds a watcher that recompiles docs.scss when any dist/*.css file changes. fixes palantir#234
greglo · Dec 7, 2016 · 2abdcaf · 2abdcaf
1 parent fef87e8
commit 2abdcaf
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/gulp/sass.js b/gulp/sass.js
@@ -85,7 +85,8 @@ module.exports = (gulp, plugins, blueprint) => {
             // see https://github.com/floridoo/vinyl-sourcemaps-apply/issues/11#issuecomment-231220574
             .pipe(plugins.sourcemaps.write(".", { sourceRoot: null }))
             .pipe(blueprint.dest(project))
-            .pipe(plugins.connect.reload());
+            // only bundled packages will reload the dev site
+            .pipe(project.sass === "bundle" ? plugins.connect.reload() : plugins.util.noop());
     });
 
     // concatenate all sass variables files together into one single exported list of variables

diff --git a/gulp/watch.js b/gulp/watch.js
@@ -4,7 +4,11 @@
 "use strict";
 
 module.exports = (gulp, plugins, blueprint) => {
-    var path = require("path");
+    const path = require("path");
+
+    function createSrcGlob(project, filename) {
+        return `${project.cwd}/src/!(generated)/**/${filename}`;
+    }
 
     gulp.task("connect", () => {
         plugins.connect.server({
@@ -22,23 +26,20 @@ module.exports = (gulp, plugins, blueprint) => {
             if (project.id !== "docs") {
                 tasks.push("sass-variables", "docs-kss");
             }
-            gulp.watch(
-                [`${project.cwd}/src/**/*.scss`, `!${project.cwd}/src/**/generated/*.scss`],
-                tasks
-            );
+            gulp.watch(createSrcGlob(project, "*.scss"), tasks);
         });
 
         blueprint.projectsWithBlock("typescript").forEach((project) => {
-            gulp.watch(
-                blueprint.getTypescriptSources(project, true)
-                    .concat(`!${project.cwd}/{bower_components,typings}{,/**}`),
-                [`typescript-compile-w-${project.id}`]
-            );
+            gulp.watch(createSrcGlob(project, "*.ts{,x}"), [`typescript-compile-w-${project.id}`]);
         });
 
-        const docsSrcPath = blueprint.findProject("docs").cwd;
-        gulp.watch(path.join(docsSrcPath, "src/styleguide.md"), ["docs-kss"]);
+        const docsCwd = blueprint.findProject("docs").cwd;
+        gulp.watch(`${docsCwd}/src/styleguide.md`, ["docs-kss"]);
+
+        // recompile docs CSS when non-docs dist/*.css files change
+        gulp.watch("packages/!(docs)/dist/*.css", ["sass-compile-w-docs"]);
     });
 
     gulp.task("watch", ["watch-files", "webpack-compile-w-docs"]);
 };
+