Viteを使ったWordPress開発環境の構築

【利用目的】 個人開発 【相談内容】 お世話になります。 Viteとdocker（wp-env）を使って、WordPressの開発環境を作りたいと思っています。 ※wp-envに関しては実装済み [ プロジェクト構造 ] sample_project ├ wp │ ├ plugins │ ├ themes │ │ └ sample_theme │ │ 　 └ assets │ │ 　 　 ├ scss │ │ 　 　 │ └ style.scss │ │ 　 　 ├ css │ │ 　 　 │ └ style.css │ │ 　 　 ├ img │ │ 　 　 │ ├ sample01.webp │ │ 　 　 │ ├ sample02.webp │ │ 　 　 │ ├ sample03.webp │ │ 　 　 │ ├ sample04.svg │ │ 　 　 │ ├ sample05.gif │ │ 　 　 │ └ original │ │ 　 　 │ 　 ├ sample01.jpg │ │ 　 　 │ 　 ├ sample02.png │ │ 　 　 │ 　 ├ sample03.webp │ │ 　 　 │ 　 ├ sample04.svg │ │ 　 　 │ 　 └ sample05.gif │ │ 　 　 ├ js │ │ 　 　 │ └ script.js │ │ 　 　 ├ index.php │ │ 　 　 └ style.css │ └ uploads ├ .wp-env.json ├ package.json └ vite.config.js [ npm run devでviteが起動中に実行したいこと ] ・wpテーマ内のscssファイルが保存されたらscssファイルのソート処理とリント処理とコンパイル、ベンダープレフィックスの付与を実行する。 ・wp-テーマ内の画像フォルダ（assets/img/）内が更新されたら画像のwebp変換および圧縮処理を行う。 scssファイルのソート処理には「stylelint-config-recess-order」、リント処理には「stylelint-config-recommended-scss」「stylelint-scss」、ベンダープレフィックスの付与には「Autoprefixer」を使っていただきたいです。 [ npm run buildでビルド時に実行したいこと ] ・wpテーマ内のscssファイルのソート処理とリント処理とコンパイル、ベンダープレフィックスの付与を実行する。 ・wp-テーマ内の画像フォルダ（assets/img/）内の画像のwebp変換および圧縮処理を行う。 ・javascriptファイルの圧縮化 画像フォルダ内が更新されたら画像のwebp変換および圧縮処理には、「sharp」を使っていただきたいです。 また、nodeとnpmのバージョンは以下のもので考えております。 node: 20.11.1 npm: 10.5.0 どうぞ宜しくお願いいたします。