# Run package.json scripts upon any file changes in a folder

> Learn how to re-run a package.json script automatically whenever a file in a folder changes, using the watch npm package to rebuild on every save.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-07-01 | Topics: [Node.js](https://flaviocopes.com/tags/node/) | Canonical: https://flaviocopes.com/package-json-watch/

My practical problem: I want to automatically regenerate the CSS, going through a PostCSS pipeline, upon file changes.

The approach I describe will work for any kind of automatic file and folder watching, not just for this specific case.

I have this script in action, which I run using `yarn build:css`:

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

and I want to re-run it whenever something changes in the `layouts` folder, which contains all the HTML files that build up my site.

If you're familiar with Tailwind, it creates a slightly big CSS files with all the things you might need, and you can optimize it by removing any class you don't use.

Every time I change something in there, I want to regenerate the CSS, and trigger the purge and minification I set up in the [PostCSS](https://flaviocopes.com/postcss/) setup.

How to do this?

Install the [`watch`](https://www.npmjs.com/package/watch) [npm](https://flaviocopes.com/npm/) package:

```bash
npm install watch
```

and add the `watch` script to your `package.json` file. You already had `build:css` from before, we just add a script that watches the layouts folder and runs `build:css` upon every change:

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

Now run `npm run watch` or `yarn watch`.