在文件夾中的任何文件變更時運行 package.json 腳本

本文將解釋如何在文件夾的文件變更時重新運行 package.json 腳本。

我的實際問題是：我希望在文件變更時自動重新生成 CSS，通過 PostCSS 流程進行處理。

我描述的方法將適用於任何類型的自動文件和文件夾監視，而不僅僅是這個特定情況。

我正在運行以下腳本，使用 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

然後在您的 package.json 文件中加入 watch 腳本。您已經有了之前的 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。