フォルダ内のファイルが変更されたら、package.jsonスクリプトを実行します

この記事では、フォルダー内のファイルが変更されるたびにpackage.jsonスクリプトを再実行する方法について説明します。

私の実際的な問題:ファイルが変更されたときに、PostCSSパイプラインを介してCSSを自動的に再生成したい。

私が説明するアプローチは、この特定のケースだけでなく、あらゆる種類の自動ファイルおよびフォルダー監視で機能します。

このスクリプトを実行しています。yarn build:css

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

何かが変わったときはいつでも再実行したいlayouts私のサイトを構築するすべてのHTMLファイルを含むフォルダー。

Tailwindに精通している場合は、必要なものがすべて含まれた少し大きなCSSファイルが作成され、使用しないクラスを削除することで最適化できます。

そこで何かを変更するたびに、CSSを再生成し、で設定したパージとミニファイをトリガーしたいと思います。PostCSSセットアップ。

これを行う方法?

をインストールしますwatchnpmパッケージ:

npm install watch

を追加します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"
}

今すぐ実行npm run watchまたはyarn watch