Eleventy: Configuration method to manually add watch targets

[zachleat]

Strings, globs, etc.

Inspired by #325.

eleventyConfig.watch("**/*.js")

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

The enhancement backlog can be found here: https://github.com/11ty/eleventy/issues?utf8=%E2%9C%93&q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+

Don’t forget to upvote the top comment with 👍!

[gerwitz]

If I understand correctly, this it the feature I need for my use case: I'm using Sass via a gulp task, and want .scss changes to trigger a build.

Having to explain to designers that some files need a manual update process is not something I look forward to. 😉

[zachleat]

@gerwitz typically when I’ve seen users integrate grunt or gulp, they call eleventy from grunt/gulp and don’t have a manual update process. Can you elaborate on a limitation preventing you from doing that?

[kleinfreund]

Using Eleventy and Sass together, one has two main options:

• Use Eleventy as the build tool. Then, adding manual watch targets (e.g. a sass directory) would be necessary to trigger a rebuild when changing the Sass files (that’s also true when using plain CSS). However, Eleventy is not a build tool. For more projects with a more complex build process, this could end up being very complicated.
• Use a third-party build tool (e.g. gulp, grunt, npm). Then, the tool is responsible for watching for file changes and needs to rebuild Eleventy based on that.

[gerwitz]

Thanks for the perspective correction! I’m new to the JS-outside-a-browser ecosystem and need to take the time to learn Gulp, et al before assuming everything will work like Ruby/Java/ASP/PHP/CGI/whatever…

[jevets]

I was about to post a plea and some context here begging for this feature sooner than later, but I found an alternative solution (thought it was worth posting for anyone's future reference... and my own).

Try to get your special "watch needy" files somewhere into _includes, and you won't need to eleventyConfig.watch() them (even if you never actually {% include %} them from other templates).

---

@gerwitz If you put your .sass/.scss files into the _includes directory, Eleventy will automatically rebuild whenever one of the files is changed. (You could @import sass files from the _includes dir.)

In fact any file in _includes triggers a rebuild when changed (while eleventy [--serve] [--watch] is running).

It even works if there are no handlers/processors/etc set up for the file type: i.e. saving _includes/some-wacky-file.fakery will trigger a rebuild.

---

In my case, I'm using postcss, and I set up a stylesheet.11ty.js JS template file (w/ { permalink: 'postcss-processed-styles.css' }) that does the postcss.process() work.

I really wanted to avoid adding a build system (gulp, webpack), to keep things as simple and lean as possible, and to (attempt to) rely only on 11ty for build if I could get away with it.

My problem was that 11ty wouldn't watch dependent .css files (pulled in via postcss-imports in my postcss files). I'd edit a css partial, then I'd have to either restart eleventy --serve or save stylesheet.11ty.js to force a rebuild.

I didn't want to add the .css files to the templateFormats config, since I don't need those files in the built /_site output. (Adding them to templateFormats felt quite unnecessary just for the sake of getting them watched).

Since you can't require() a plain text (css) file in node.js, it's a no go on leveraging watched javascript dependencies for .css files.

[zachleat]

This shipped with 0.10.0 but was never removed from the Enhancement queue! Thanks @MadeByMike

[zachleat]

@MadeByMike can you confirm that this works with Globs? I don’t see that listed explicitly on the docs https://www.11ty.dev/docs/config/#add-your-own-watch-targets

[rolbr]

While I'm not Mike I can confirm this works with globs.

eleventyConfig.addWatchTarget("src/**/*.scss"); successfully triggers a rebuild for all changes to .scss files _somewhere_ in src.

Awesome! 🥳