search

11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
16.68k stars 484 forks source link

`addWatchTarget` doesn't work with `npm-run-all` or `concurrently` #1736

Open jordanthornquest opened 3 years ago

jordanthornquest commented 3 years ago

Describe the bug When attempting to run Eleventy with a tool like concurrently or npm-run-all, Eleventy doesn't appear to watch targets specified via addWatchTarget. However, it does work in other parallel use cases. Some specifics:

I am running PostCSS with its --watch flag to watch my CSS files for changes. Similarly, I'm running Eleventy with its --serve flag to watch my Eleventy files for changes. These are done via two NPM scripts (npm run watch:css and npm run watch:site). I'm running the two scripts in parallel using npm run start.

I am using PostCSS to generate a file from ./src/_assets/css/style.css to ./.cache/compiled.css. I am using Eleventy's addWatchTarget feature to watch for changes to the ./.cache/compiled.css file. When changes are detected, Eleventy should trigger a rebuild. I am using PostCSS's verbose output to ensure that PostCSS is compiling the file, both when initially running npm run start and on file changes. The output confirms that PostCSS is recompiling as expected.

(It may be worth noting that I am choosing to set setUseGitIgnore to false, and I'm using a .eleventyignore file instead, which I've done in order to watch .cache/, a directory otherwise ignored.)

When using a script like npm run watch:css & npm run watch:site, Eleventy detects changes to compiled.css and rebuilds successfully. If I run npm run watch:css and npm run watch:site in separate terminal windows, I can achieve the same success.

When running the same scripts together using either concurrently or npm-run-all, Eleventy does not detect changes to compiled.css.

To Reproduce Steps to reproduce the behavior:

  1. Clone website repository (linked to a specific commit in the project's Git history): https://github.com/jordanthornquest/jordanthornquest/tree/c86a74b53d6b687a5f99bdcfa5a57d0ca4f79620
  2. npm install
  3. npm run start
  4. Check repository to ensure PostCSS has generated ./.cache/compiled.css.
  5. View terminal output.
    • PostCSS verbose output should note that the file has been compiled.
    • Eleventy's watcher fails to recognize that the file has been updated, and doesn't trigger a build.
  6. End npm-run-start
  7. Run npm run watch:site & npm run watch:css
  8. View terminal output.
    • PostCSS verbose output should note that the file has been compiled.
    • Eleventy's watcher recognizes that the file has been updated, and triggers a build.

Expected behavior My expectation is that running these two scripts with concurrently or npm-run-all would behave identically to running the scripts with npm run watch:css & npm run watch:site.

Environment:

Additional context: While I'd understand assuming the issue may lie with npm-run-all or concurrently, Eleventy is the only build tool I've had this issue with. PostCSS, Dart Sass, & Rollup don't seem to have the same issue.

pepelsbey commented 2 years ago

FYI, I’m trying to build something similar with PostCSS, but using built-in dev server and addExtension. It still doesn’t work the way it supposed to, but I think I’m close to solving it.

zachleat commented 1 year ago

Maybe related to #893—what’s in your .eleventyignore?