👀 How to - vite-plugin-watch-and-run

Adding watch mode to any command / Tool!

Installation

npm i -D vite-plugin-watch-and-run

pnpm add -D vite-plugin-watch-and-run

yarn add --dev vite-plugin-watch-and-run

bun add --dev vite-plugin-watch-and-run

Configuration

Add watchAndRun plugin with the following configuration:

• watch: a glob pattern to watch for changes. This will be matched against the absolute path for altered files.
• run: a command to trigger when a file change is detected (You can be very creative 🥳!)

import path from 'path'
import { watchAndRun } from 'vite-plugin-watch-and-run'
 
/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    watchAndRun([
      {
        name: 'gen',
        watchKind: ['add', 'change', 'unlink'],
        watch: path.resolve('src/**/*.(gql|svelte)'),
        run: 'npm run gen',
        delay: 300
      }
    ])
  ]
}
 
export default config

Side Notes

• Full list of watchKind can be found here: https://github.com/paulmillr/chokidar#api

• delay is good in case you have 200 files added realy fast! Like this the cmd is executed only once.

• For the run command we recommend to use npm run xxx as it will work for npm, yarn and pnpm 🙃