Ejecute los scripts package.json ante cualquier cambio de archivo en una carpeta

Este artículo explica cómo hacer que un script package.json se vuelva a ejecutar cada vez que cambia un archivo en una carpeta.

Mi problema práctico: quiero regenerar automáticamente el CSS, pasando por una canalización de PostCSS, tras los cambios de archivo.

El enfoque que describo funcionará para cualquier tipo de observación automática de archivos y carpetas, no solo para este caso específico.

Tengo este script en acción, que ejecuto usandoyarn build:css:

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

y quiero volver a ejecutarlo cada vez que algo cambia en ellayoutscarpeta, que contiene todos los archivos HTML que componen mi sitio.

Si está familiarizado con Tailwind, crea archivos CSS un poco grandes con todas las cosas que pueda necesitar, y puede optimizarlo eliminando cualquier clase que no use.

Cada vez que cambio algo allí, quiero regenerar el CSS y activar la purga y la minificación que configuré en elPostCSSconfiguración.

¿Como hacer esto?

Instala elwatchpaquete npm:

npm install watch

y agrega elwatchguión a tupackage.jsonexpediente. Ya teniasbuild:cssde antes, solo agregamos un script que observa la carpeta de diseños y ejecutabuild:cssen cada cambio:

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

Ahora correnpm run watchoyarn watch.