During dev, how can I block page load until watchify finishes?

Question

Here's a typical workflow:

1. Edit JS file
2. Save file, watchify automatically starts rebuilding it for me
3. alt-tab to browser
4. ctrl+R to reload page

That's great, except if watchify takes longer than steps 3 and 4, it sucks because you either get the stale code or an error.

Is there an easy way to guarantee that doesn't ever happen? Like a way for watchify to signal to my server that it should wait another split second before trying to load the requested page? If such a thing doesn't exist, how do people deal with this problem in practice?

I must suck at Googling because I can't even find people talking about this problem except this which says "Add a simple (Node-based) server that will block on requests until the watch is done running: this would avoid the always-frustrating phenomenom of reloading the page only to find the watch hasn't quite run yet." -- but unfortunately that's an entry in a todo list, not something that exists in that repo.

Answer 1

If you are using Grunt or Gulp you can use the live reload plugin.

Or you can play a beep when the task is complete, so that you know when to reload the page.

Also it may be worth looking at livereloadify.