`npm start` does not run `gulp-watch` (Windows)

[p2635]

Description I can sorta build the project, but I'm stuck on two issues:

1. Doing npm start does not actually host it locally for me, but it does seem to generate all the website files.
2. When I open the index html file, it looks like it's missing all the styles for some reason.

Environment I've met the criteria mentioned under 'Requirements':

• Windows 10 Home 64 bit
• Terminal
• git version 2.39.1.windows.1
• Node 16.0.0 installed through nvm
• VS Code 1.75.1

Steps to reproduce Download and clone project, main branch npm install then npm start.

Expected Results I expected to see the site build and run on localhost:(something).

Actual Results

1. I don't see a line in my terminal that says Local:
2. If I open the index.html file manually, the site looks weird. It doesn't have any styling on it.

[p2635]

Terminal output:

PS D:\a11y\a11yproject.com> npm start

> the-a11y-project@1.5.1 start
> npm run eleventy-watch & npm run gulp-watch

> the-a11y-project@1.5.1 eleventy-watch
> eleventy --incremental --watch

[11ty] Writing dist/sitemap.xml from ./src/sitemap.xml.njk
[11ty] Writing dist/feed/.htaccess from ./src/feed/htaccess.njk
[11ty] Writing dist/feed/feed.xml from ./src/feed/feed.njk
.... Redacted a lot of other Writing dist lines ...
[11ty] Benchmark   2161ms  10%  5892× (Configuration) "url" Nunjucks Filter
[11ty] Copied 24 files / Wrote 111 files in 8.66 seconds (78.0ms each, v1.0.0)
[11ty] Watching…

[nchan0154]

Hmm, interesting, I can reproduce when I also use Windows Terminal and a clean install. I also run Windows as my main dev machine but usually use WSL so I haven't encountered this in the past! I will look in to this more during the work week and try to get to the root of the issue, but if you have access to other terminals, it's worth giving it a shot :)

For my own notes, it seems to execute the eleventy-watch script but the gulp-watch script never executes, so poking around with gulp would be a good place to start.

[p2635]

Thanks for getting back to me so quickly @nchan0154, I'll try to investigate that. I think it's worth updating the README after I resolve this for sure.

UPDATE: I found a workaround, run npm run eleventy-watch & npm run gulp-watch directly instead of npm start. I ran this directly from the terminal on VS code (I guess it's just the same as opening up a powershell terminal).

I think the root cause is this:

To run multiple scripts in parallel, we use &. Example: npm run lint & npm test. This only works in Unix environments. In Windows, it'll run sequentially.

Source: https://dev.to/paulasantamaria/mastering-npm-scripts-2chd

Potential solution: https://github.com/mysticatea/npm-run-all OR just update the README for now to tell Windows users to use the workaround I said above.

[nchan0154]

Thanks for the excellent debugging @p2635! @ericwbailey I think it possibly worth considering adding npm-run-all so as not to confuse our Windows-using friends, but wanted to ask for feedback first.

[ericwbailey]

@nchan0154 Thanks so much for confirming, and thank you @p2635 for the detailed report.

I think in the short term we can definitely update the README. Eleventy 2.0 just went out of beta, and with it is also a way for it to process and compile Sass. This will address this issue, as well as unblock https://github.com/a11yproject/a11yproject.com/issues/989.

[ericwbailey]

README is updated: https://github.com/a11yproject/a11yproject.com/blob/main/README.md#running-the-website