Run the package.json script after any file changes in the folder

This article describes how to rerun the package.json script when the files in the folder change.

My actual problem: I want to automatically regenerate the CSS through the PostCSS pipeline when the file changes.

The method I describe will be applicable to any type of automatic file and folder monitoring, not just limited to this specific situation.

I am using this script and usingyarn build:css:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
}

I want to re-run it on any changes in the runlayoutsFolder, which contains all the HTML files that build my website.

If you are familiar with Tailwind, it will create a slightly larger CSS file with everything you might need, and it can be optimized by removing any classes you don't need.

Every time I change the content, I want to regenerate the CSS and trigger myCSSSet up.

How can this be done?

installationwatchnpm package:

npm install watch

And addwatchScript for youpackage.jsonfile. You already havebuild:cssFrom before, we only added a script to monitor the layouts folder and runbuild:cssEvery time you change:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

Run nownpm run watchoryarn watch.