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

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

Example usage

1// vite.config.js
2import viteAssetsWatcher from 'vite-plugin-assets-watcher';
3
4export default defineConfig({
5  plugins: [
6    viteAssetsWatcher({
7      targets: [
8        {
9          src: 'static/fonts/*.{woff,woff2,ttf,otf,svg}',
10          dest: 'assets',
11        },
12        {
13          src: 'static/images/*.{jpg,jpeg,gif,png,webp}',
14          dest: 'assets',
15        },
16        {
17          src: 'static/svg/*.svg',
18          dest: 'snippets',
19          rename: (filePath) => filePath.replace('.svg', '.liquid'),
20        },
21      ],
22    }),
23  ],
24});

1{
2  "name": "my-project",
3  "scripts": {
4    "watch": "vite build --watch"
5  }
6}

1npm run watch
2# 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:

1{
2  "name": "my-project",
3  "scripts": {
4    "dev": "vite & vite build --watch"
5  }
6}

1npm run dev
2# yarn dev

Acknowledgements

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