对文件夹中的任何文件更改运行package.json脚本

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

我的实际问题：我想在文件更改时通过PostCSS管道自动重新生成CSS。

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:

我正在使用此脚本，该脚本是使用yarn build:css运行的：

"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.

并且我想在layouts文件夹中发生任何更改时重新运行它，该文件夹包含构建我的网站的所有HTML文件。

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.

如果您熟悉Tailwind，它会创建一个稍大CSS文件，其中包含您可能需要的所有内容，并且您可以通过删除不需要的任何类来对其进行优化。

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 setup.

每次在其中进行更改时，我都想重新生成CSS，并触发在PostCSS设置中设置的清除和缩小。

How to do this?

这该怎么做？

Install the watch npm package:

安装watch npm软件包：

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:

并将watch脚本添加到package.json文件。 您以前已经拥有过build:css ，我们只需添加一个脚本即可监视layouts文件夹并在每次更改时运行build:css ：

"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.

现在运行npm run watch或yarn watch 。

翻译自: https://flaviocopes.com/package-json-watch/