Exécutez les scripts package.json lors de tout changement de fichier dans un dossier

Cet article explique comment faire réexécuter un script package.json chaque fois qu'un fichier dans un dossier est modifié.

Mon problème pratique: je souhaite régénérer automatiquement le CSS, en passant par un pipeline PostCSS, lors des changements de fichiers.

L'approche que je décris fonctionnera pour tout type de surveillance automatique de fichiers et de dossiers, pas seulement pour ce cas spécifique.

J'ai ce script en action, que je lance en utilisantyarn build:css:

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

et je veux le relancer chaque fois que quelque chose change dans lelayoutsdossier, qui contient tous les fichiers HTML qui composent mon site.

Si vous êtes familier avec Tailwind, il crée des fichiers CSS légèrement volumineux avec tout ce dont vous pourriez avoir besoin, et vous pouvez l'optimiser en supprimant toute classe que vous n'utilisez pas.

Chaque fois que je change quelque chose là-dedans, je veux régénérer le CSS et déclencher la purge et la minification que j'ai configurées dans lePostCSSinstaller.

Comment faire cela?

Installez lewatchpackage npm:

npm install watch

et ajoutez lewatchscript à votrepackage.jsondéposer. Vous aviez déjàbuild:cssd'avant, nous ajoutons simplement un script qui surveille le dossier des mises en page et s'exécutebuild:cssà chaque changement:

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

Maintenant, coursnpm run watchouyarn watch.