Watching reliability, async build support, npm start #95

geoffp · 2017-02-01T05:39:48Z

This adds support for the ongoing async build work in the PL / Node core, and should fix #82. Includes changes from #92.

I also recently ran into some major file watching reliability issues on Mac and Linux during a deployment of a fresh Pattern Lab instance. In one case, the reload() tasks would never complete, leaving the watcher dead after the first reload. In all cases, new and deleted files were not detected. So I decided to fix up file watching and see if I could get it rock solid.

In research, I discovered that gulp.watch() is (or has been historically) sensitive to paths beginning with ./, and may not work with absolute paths! I tried normalizing all paths to relative before feeding them into the watchers, and now they seem much happier. Just using the watcher callback, instead of catching the 'change' event on the stream also picks up new and deleted files.

With this change set, we have:

'npm start' will now execute node_modules/gulp/bin/gulp.js patternlab:serve, making global gulp-cli optional
Support for es6 syntax in the linter
Watch the JS file directory
Async build support, backwards-compatible with sync versions of PL
Normalize all paths to relative. This works around some limitations in gulp.watch()
Detect new and deleted files
Make the reload functions use done callbacks, as their tasks were sometimes not completing
Organize and report file watching groups to promote user confidence in the intent of the watcher

This seems to work very reliably for on Linux with Node 6.9. I'm going to test on Mac OS tomorrow. It could use a review and a Windows test as well.

Feedback is welcome as always, and I apologize if I've stepped on any toes.

async building

parallelize gulp build step

'./', relative to the process root, and with backslashes converted to forward slashes. This works around some limitations in gulp.watch(). Detect new and deleted files as well. Make the reload functions use callbacks, as their tasks were sometimes not completing. Organize and report file watching groups to promote user confidence in the intent of the watcher.

bmuenzenmeyer

Geoff - check out my comments. Are you seeing this on a Mac?

bmuenzenmeyer · 2017-02-21T11:16:38Z

package.json

@@ -24,6 +25,7 @@
  "bugs": "https://github.com/pattern-lab/edition-node-gulp/issues",
  "author": "Brian Muenzenmeyer",
  "scripts": {
+    "start": "node_modules/gulp/bin/gulp.js patternlab:serve",


npm start nor npm run start is not working for me

$ npm run start > edition-node-gulp@1.3.4 start C:\src\edition-node-gulp > node_modules/gulp/bin/gulp.js patternlab:serve 'node_modules' is not recognized as an internal or external command, operable program or batch file. npm ERR! Windows_NT 10.0.14393 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "start" npm ERR! node v4.6.2 npm ERR! npm v2.15.11 npm ERR! code ELIFECYCLE npm ERR! edition-node-gulp@1.3.4 start: `node_modules/gulp/bin/gulp.js patternlab:serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the edition-node-gulp@1.3.4 start script 'node_modules/gulp/bin/gulp.js patternlab:serve'. npm ERR! This is most likely a problem with the edition-node-gulp package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node_modules/gulp/bin/gulp.js patternlab:serve npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs edition-node-gulp npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm ERR! npm owner ls edition-node-gulp npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! C:\src\edition-node-gulp\npm-debug.log

I just learned that NPM creates aliases for all project-local executables in node_modules/.bin, and puts that in the the PATH environment variable when you run NPM scripts. Therefore, I think we don't need the full path to the local executable, which is what I think is breaking this on Windows.

bmuenzenmeyer · 2017-02-21T11:18:33Z

gulpfile.js

+  ];
+
+  for (const watcher of watchers) {
+    console.log('\n' + chalk.bold('Watching ' + watcher.name + ':'));


this seems to be emitting a couple times for css

... [05:17:00] Finished 'build' after 8.54 s [05:17:00] Finished 'patternlab:build' after 9.18 s [05:17:00] Starting 'patternlab:connect'... [05:17:00] Starting '<anonymous>'... [BS] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://192.168.0.108:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://192.168.0.108:3001 -------------------------------------- [BS] Serving files from: public [05:17:01] Finished '<anonymous>' after 973 ms [05:17:01] Finished 'patternlab:connect' after 974 ms [05:17:01] Starting 'watch'... Watching CSS: source/css/**/*.css Watching CSS: source/css/**/*.css Watching CSS: source/css/**/*.css

Note...

gulp patternlab:serve does work beautifully, however

This is bizarre. I don't see any of this on the Mac. I'll look into it.

Hey, @bmuenzenmeyer -- what Node version are you running?

Aha! I have been misled as to the Node 4 compatibility of for...of.

i'd have to look at my home rig again, but i thought it was at least 6?

geoffp · 2017-02-22T16:08:57Z

@bmuenzenmeyer I have potential fixes for both issues. Thanks for the testing!

raphaelokon · 2017-02-22T20:15:28Z

@geoffp Do you know why for..of broke on v4?

raphaelokon · 2017-02-22T20:16:26Z

Likely that the console.log inside broke it … nodejs/node#5720

geoffp · 2017-02-22T20:58:43Z

Oh wow...that's a good find @raphaelokon. I had no idea why it was behaving so strangely, I just naively switched to Node 4 to test, saw breakage and with some disappointment, backed out of using for...of.

raphaelokon · 2017-02-22T21:06:27Z

Cheers. I was curious why it did break because I used for..of myself in v4.

bmuenzenmeyer · 2017-02-23T11:51:18Z

working!

geoffp added 9 commits November 14, 2016 00:34

allow es6 syntax; make the build() function return a promise to support

75fe2c5

async building

support both async and sync versions of pattern lab; simplify and

300887a

parallelize gulp build step

go back to series for this; parallel didn't help anything

ed83d68

appease the linter

49f8fb0

add 'npm start' script, making global gulp optional

fd287de

clarify build task

c049d23

Merge remote-tracking branch 'origin/dev' into async-building

bf73421

watch for JS file changes; fixes #82

9db56a0

geoffp assigned bmuenzenmeyer Feb 1, 2017

bmuenzenmeyer reviewed Feb 21, 2017

View reviewed changes

geoffp added 2 commits February 22, 2017 10:07

remove full path in npm start script -- hopefully this fixes Windows

1b329c0

move for...of loop to .forEach(...) for Node 4 compatibility

dbac534

bmuenzenmeyer merged commit 5c8966d into dev Feb 23, 2017

bmuenzenmeyer deleted the async-building branch February 23, 2017 11:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Watching reliability, async build support, npm start #95

Watching reliability, async build support, npm start #95

Uh oh!

geoffp commented Feb 1, 2017 •

edited

Loading

Uh oh!

bmuenzenmeyer left a comment

Uh oh!

bmuenzenmeyer Feb 21, 2017 •

edited

Loading

Uh oh!

geoffp Feb 22, 2017

Uh oh!

bmuenzenmeyer Feb 21, 2017

Uh oh!

bmuenzenmeyer Feb 21, 2017

Uh oh!

geoffp Feb 22, 2017

Uh oh!

geoffp Feb 22, 2017

Uh oh!

geoffp Feb 22, 2017

Uh oh!

bmuenzenmeyer Feb 22, 2017

Uh oh!

geoffp commented Feb 22, 2017

Uh oh!

raphaelokon commented Feb 22, 2017

Uh oh!

raphaelokon commented Feb 22, 2017

Uh oh!

geoffp commented Feb 22, 2017

Uh oh!

raphaelokon commented Feb 22, 2017

Uh oh!

bmuenzenmeyer commented Feb 23, 2017

Uh oh!

Uh oh!

Watching reliability, async build support, npm start #95

Watching reliability, async build support, npm start #95

Uh oh!

Conversation

geoffp commented Feb 1, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmuenzenmeyer left a comment

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer Feb 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

geoffp Feb 22, 2017

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer Feb 21, 2017

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer Feb 21, 2017

Choose a reason for hiding this comment

Uh oh!

geoffp Feb 22, 2017

Choose a reason for hiding this comment

Uh oh!

geoffp Feb 22, 2017

Choose a reason for hiding this comment

Uh oh!

geoffp Feb 22, 2017

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer Feb 22, 2017

Choose a reason for hiding this comment

Uh oh!

geoffp commented Feb 22, 2017

Uh oh!

raphaelokon commented Feb 22, 2017

Uh oh!

raphaelokon commented Feb 22, 2017

Uh oh!

geoffp commented Feb 22, 2017

Uh oh!

raphaelokon commented Feb 22, 2017

Uh oh!

bmuenzenmeyer commented Feb 23, 2017

Uh oh!

Uh oh!

geoffp commented Feb 1, 2017 •

edited

Loading

bmuenzenmeyer Feb 21, 2017 •

edited

Loading