Clean up CLI output so authors know when to refresh the page.

[robdodson]

When you run npm run dev we're actually running a few watchers in parallel, including eleventy. Unfortunately eleventy takes a while to build but what folks see in the console is this:

However, if you wait an additional 12 seconds you'll see this:

It's only at this point that eleventy is done building and you can actually refresh the page.

We should see if we can make the output in the terminal more clear so folks know that eleventy is still building. Maybe by suppressing all of the other log messages?

[robdodson]

cc @petele @kaycebasques @jpmedley

[petele]

Personally I like the time stamp that gulp spits out, makes it easy to verify it built after I hit save. Beyond that, for me it's helpful to know it's currently building, and when it's ready. I don't think I care about the build steps that Gulp spits out.

[robdodson]

Gulp has a nice feature called ignoreInitial which you can pass to watch() which tells it to not run the task the first time you call gulp watch but to only react to file changes.

I'm kind of curious if we could move all of our tasks into gulp and use it as our file watcher, instead of depending on rollup's file watcher + eleventy's file watcher, etc.

Eleventy's file watcher already has some issues in that it won't rerun eleventy when you modify .eleventy.js or any of the shortcodes (issue).

[robdodson]

If we did this, we could rewrite the npm run dev command to be:

"dev": "npm-run-all clean gulp --parallel --race gulp:watch server",

If we're using gulp to trigger eleventy, then this will ensure eleventy has built before the task says "Watching...".

The alternative is to do this:

"dev": "npm-run-all clean gulp rollup eleventy --parallel --race gulp:watch rollup:watch eleventy:watch server",

Unfortunately this will run eleventy twice because calling eleventy --watch (which is what `eleventy:watch does) will trigger an eleventy build.

[robdodson]

Submitted an issue for this to the eleventy repo.
11ty/eleventy#1336

It looks like they're using ignoreInitial in chokidar (which is the same thing gulp is doing I believe) so I'm really not sure why eleventy --watch runs eleventy twice... But if we could resolve that then we could ensure it runs at least once before the terminal goes into its waiting state.

[robdodson]

I think since we moved to Firebase this has gotten a bit worse. Now the firebase emuluator clogs the CLI and you u can't tell when sass has rebiult.