この記事では、フォルダー内のファイルが変更されるたびに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セットアップ。
これを行う方法?
をインストールしますwatch
npmパッケージ:
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
。