Vite Plugin Assets Watcher

For those who need to watch static assets, keeping the target destination folder always in sync.

Motivation

In my Shopify theme projects that use vite and vite-plugin-shopify, I couldn't get vite-plugin-static-copy to work for my needs. I needed a plugin to always keep static assets up to date in the dist folder, so Shopify CLI could upload them to the store theme straight away.

I haven't thoroughly tested this plugin, so use at your own risk.

Feedbacks are welcome.

Installation

npm i -D vite-plugin-assets-watcher # npm
yarn add -D vite-plugin-assets-watcher # yarn

Example usage

// vite.config.js
import viteAssetsWatcher from 'vite-plugin-assets-watcher';

export default defineConfig({
  plugins: [
    viteAssetsWatcher({
      targets: [
        {
          src: 'static/fonts/*.{woff,woff2,ttf,otf,svg}',
          dest: 'assets',
        },
        {
          src: 'static/images/*.{jpg,jpeg,gif,png,webp}',
          dest: 'assets',
        },
        {
          src: 'static/svg/*.svg',
          dest: 'snippets',
          rename: (filePath) => filePath.replace('.svg', '.liquid'),
        },
      ],
    }),
  ],
});

{
  "name": "my-project",
  "scripts": {
    "watch": "vite build --watch"
  }
}

npm run watch
# yarn watch

Assets are simply copied after build (non-watch mode) on vite's closeBundle hook, so if you need to clear out old assets in the dist folder, you can use vite's build.emptyOutDir: true config option.

Note: you can run both vite and vite build --watch at the same time with the help of npm-run-all or concurrently, by using two terminals, or even directly in package.json, example:

{
  "name": "my-project",
  "scripts": {
    "dev": "vite & vite build --watch"
  }
}

npm run dev
# yarn dev

Acknowledgements

• Vite Plugin Shopify by Barrel/NY (Thanks for the amazing plugins!)
• Vite Plugin Static Copy