For those who need to watch static assets, keeping the target destination folder always in sync.
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.
npm i -D vite-plugin-assets-watcher # npm
yarn add -D vite-plugin-assets-watcher # yarn
// 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
- Vite Plugin Shopify by Barrel/NY (Thanks for the amazing plugins!)
- Vite Plugin Static Copy