From 847cc250489ac11619e3782692f2cff1e56fab34 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 31 Jul 2017 09:24:59 -0700 Subject: [PATCH 1/6] Spawn compileCss as a child process to prevent a node-sass fatal error from killing the watch process. --- package.json | 3 ++- tasks/ui_framework.js | 59 ++++++++++++++++++++++++++++++------------- 2 files changed, 44 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index cd9aab51392bb..7ce4b92a27273 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,8 @@ "mocha": "echo 'use `node scripts/mocha`' && false", "sterilize": "grunt sterilize", "uiFramework:start": "grunt uiFramework:start", - "uiFramework:build": "grunt uiFramework:build" + "uiFramework:build": "grunt uiFramework:build", + "uiFramework:compileCss": "grunt uiFramework:compileCss" }, "repository": { "type": "git", diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index abc65f0ec05cc..386d0b6421862 100644 --- a/tasks/ui_framework.js +++ b/tasks/ui_framework.js @@ -44,6 +44,11 @@ module.exports = function (grunt) { Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done); }); + grunt.registerTask('uiFramework:compileCss', function () { + const done = this.async(); + uiFrameworkCompile().then(done); + }); + function uiFrameworkServerStart() { const serverCmd = { cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' : './node_modules/.bin/webpack-dev-server', @@ -77,27 +82,47 @@ module.exports = function (grunt) { } function uiFrameworkCompile() { - sass.render({ - file: 'ui_framework/components/index.scss' - }, function (error, result) { - if (error) { - grunt.log.error(error); - } - - postcss([postcssConfig]) - .process(result.css, { from: 'ui_framework/components/index.scss', to: 'ui_framework/dist/ui_framework.css' }) - .then(result => { - grunt.file.write('ui_framework/dist/ui_framework.css', result.css); - - if (result.map) { - grunt.file.write('ui_framework/dist/ui_framework.css.map', result.map); - } - }); + return new Promise(resolve => { + sass.render({ + file: 'ui_framework/components/index.scss' + }, function (error, result) { + if (error) { + grunt.log.error(error); + } + + postcss([postcssConfig]) + .process(result.css, { from: 'ui_framework/components/index.scss', to: 'ui_framework/dist/ui_framework.css' }) + .then(result => { + grunt.file.write('ui_framework/dist/ui_framework.css', result.css); + + if (result.map) { + grunt.file.write('ui_framework/dist/ui_framework.css.map', result.map); + } + + resolve(); + }); + }); }); } function uiFrameworkWatch() { - const debouncedCompile = debounce(uiFrameworkCompile, 400, { leading: true }); + const debouncedCompile = debounce(() => { + // Compile the SCSS in a separate process because node-sass throws a fatal error if it fails + // to compile. + grunt.util.spawn({ + cmd: 'npm', + args: [ + 'run', + 'uiFramework:compileCss', + ], + }, (error, result) => { + if (error) { + grunt.log.error(result.stdout); + } else { + grunt.log.writeln(result); + } + }); + }, 400, { leading: true }); return new Promise(() => { debouncedCompile(); From 6c50b8f5fc3f2d6f866a0552a7a1afe4a9d9b5a9 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 31 Jul 2017 10:11:04 -0700 Subject: [PATCH 2/6] Document tasks. --- ui_framework/README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui_framework/README.md b/ui_framework/README.md index 67396c5dd312b..4f7794d61ce3a 100644 --- a/ui_framework/README.md +++ b/ui_framework/README.md @@ -7,8 +7,11 @@ ### Documentation +Compile the CSS with `npm run uiFramework:compileCss`. + You can view interactive documentation by running `npm run uiFramework:start` and then visiting -`http://localhost:8020/`. +`http://localhost:8020/`. This will also start watching the SCSS files, and will recompile the CSS +automatically for you when you make changes. You can run `node scripts/jest --watch` to watch for changes and run the tests as you code. From 4f75e7fc1676a8f84f6107bb37dff5acc9e8c3db Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 31 Jul 2017 12:02:33 -0700 Subject: [PATCH 3/6] Remove NPM script for compiling CSS. --- package.json | 3 +-- tasks/ui_framework.js | 3 +-- ui_framework/README.md | 3 ++- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 7ce4b92a27273..cd9aab51392bb 100644 --- a/package.json +++ b/package.json @@ -63,8 +63,7 @@ "mocha": "echo 'use `node scripts/mocha`' && false", "sterilize": "grunt sterilize", "uiFramework:start": "grunt uiFramework:start", - "uiFramework:build": "grunt uiFramework:build", - "uiFramework:compileCss": "grunt uiFramework:compileCss" + "uiFramework:build": "grunt uiFramework:build" }, "repository": { "type": "git", diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index 386d0b6421862..497f647ca9d71 100644 --- a/tasks/ui_framework.js +++ b/tasks/ui_framework.js @@ -110,9 +110,8 @@ module.exports = function (grunt) { // Compile the SCSS in a separate process because node-sass throws a fatal error if it fails // to compile. grunt.util.spawn({ - cmd: 'npm', + cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt', args: [ - 'run', 'uiFramework:compileCss', ], }, (error, result) => { diff --git a/ui_framework/README.md b/ui_framework/README.md index 4f7794d61ce3a..61bb97d16ba56 100644 --- a/ui_framework/README.md +++ b/ui_framework/README.md @@ -7,7 +7,8 @@ ### Documentation -Compile the CSS with `npm run uiFramework:compileCss`. +Compile the CSS with `./node_modules/grunt/bin/grunt uiFramework:compileCss` (OS X) or +`.\node_modules\grunt\bin\grunt uiFramework:compileCss` (Windows). You can view interactive documentation by running `npm run uiFramework:start` and then visiting `http://localhost:8020/`. This will also start watching the SCSS files, and will recompile the CSS From ea7e67e0777e7264076d4bc7afbfdc0076d2f0b6 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 1 Aug 2017 08:09:36 -0700 Subject: [PATCH 4/6] Use promisify. --- tasks/ui_framework.js | 41 +++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index 497f647ca9d71..1b427a21ba8fc 100644 --- a/tasks/ui_framework.js +++ b/tasks/ui_framework.js @@ -3,9 +3,13 @@ import postcss from 'postcss'; import postcssConfig from '../src/optimize/postcss.config'; import chokidar from 'chokidar'; import debounce from 'lodash/function/debounce'; +import { promisify } from 'bluebird'; + const platform = require('os').platform(); const isPlatformWindows = /^win/.test(platform); +const renderSass = promisify(sass.render); + module.exports = function (grunt) { grunt.registerTask('uiFramework:build', function () { const done = this.async(); @@ -82,26 +86,23 @@ module.exports = function (grunt) { } function uiFrameworkCompile() { - return new Promise(resolve => { - sass.render({ - file: 'ui_framework/components/index.scss' - }, function (error, result) { - if (error) { - grunt.log.error(error); - } - - postcss([postcssConfig]) - .process(result.css, { from: 'ui_framework/components/index.scss', to: 'ui_framework/dist/ui_framework.css' }) - .then(result => { - grunt.file.write('ui_framework/dist/ui_framework.css', result.css); - - if (result.map) { - grunt.file.write('ui_framework/dist/ui_framework.css.map', result.map); - } - - resolve(); - }); - }); + const src = 'ui_framework/components/index.scss'; + const dest = 'ui_framework/dist/ui_framework.css'; + + return renderSass({ + file: src + }).then(result => { + postcss([postcssConfig]) + .process(result.css, { from: src, to: dest }) + .then(result => { + grunt.file.write(dest, result.css); + + if (result.map) { + grunt.file.write(`${dest}.map`, result.map); + } + }); + }).catch(error => { + grunt.log.error(error); }); } From 98055bf9b33edc85cafaee8bbd501f2726d0fed9 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 1 Aug 2017 13:08:59 -0700 Subject: [PATCH 5/6] Remove use of promisify within compile task. --- tasks/ui_framework.js | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index 1b427a21ba8fc..5cace57ea1f78 100644 --- a/tasks/ui_framework.js +++ b/tasks/ui_framework.js @@ -3,13 +3,10 @@ import postcss from 'postcss'; import postcssConfig from '../src/optimize/postcss.config'; import chokidar from 'chokidar'; import debounce from 'lodash/function/debounce'; -import { promisify } from 'bluebird'; const platform = require('os').platform(); const isPlatformWindows = /^win/.test(platform); -const renderSass = promisify(sass.render); - module.exports = function (grunt) { grunt.registerTask('uiFramework:build', function () { const done = this.async(); @@ -89,20 +86,26 @@ module.exports = function (grunt) { const src = 'ui_framework/components/index.scss'; const dest = 'ui_framework/dist/ui_framework.css'; - return renderSass({ - file: src - }).then(result => { - postcss([postcssConfig]) - .process(result.css, { from: src, to: dest }) - .then(result => { - grunt.file.write(dest, result.css); - - if (result.map) { - grunt.file.write(`${dest}.map`, result.map); - } - }); - }).catch(error => { - grunt.log.error(error); + return new Promise(resolve => { + sass.render({ + file: 'ui_framework/components/index.scss' + }, function (error, result) { + if (error) { + grunt.log.error(error); + } + + postcss([postcssConfig]) + .process(result.css, { from: src, to: dest }) + .then(result => { + grunt.file.write(dest, result.css); + + if (result.map) { + grunt.file.write(`${dest}.map`, result.map); + } + + resolve(); + }); + }); }); } From 6c87d761204eab9987366fbab80799219a893548 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 1 Aug 2017 13:57:20 -0700 Subject: [PATCH 6/6] Use src var. --- tasks/ui_framework.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index 5cace57ea1f78..cb686f3beb010 100644 --- a/tasks/ui_framework.js +++ b/tasks/ui_framework.js @@ -88,7 +88,7 @@ module.exports = function (grunt) { return new Promise(resolve => { sass.render({ - file: 'ui_framework/components/index.scss' + file: src, }, function (error, result) { if (error) { grunt.log.error(error);