> For the complete documentation index, see [llms.txt](https://akyos.gitbook.io/book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akyos.gitbook.io/book/wordpress/guides/compiler-les-assets.md).

# Compiler les assets

### ViteJS

Pour compiler les assets et développer avec une compilation en temps réel, on utilise ViteJS.

```
// package.json

"vite": "^4.0.0",
"vite-plugin-clean": "^1.0.0",
"vite-plugin-mkcert": "^1.10.1",
"vite-plugin-sass-glob-import": "^2.0.0"
```

Pour avoir le **hot reload** : 

`yarn dev`

Pour compiler : 

`yarn build`

<details>

<summary>vite.config.js</summary>

La configuration de ViteJS se fait dans ce fichier.

Dans le `defineConfig()` on indique le chemin des assets à compiler :&#x20;

```
// plus haut 
const assets = {
  base: 'resources',
  scripts: 'resources/assets/js',
  styles: 'resources/assets/css',
  images: 'resources/assets/images',
  fonts: 'resources/assets/fonts'
}
...

resolve: {
      alias: {
        '@': path.resolve(__dirname, assets.base),
        '@js': path.resolve(__dirname, assets.scripts),
        '@css': path.resolve(__dirname, assets.styles),
        '@fonts': path.resolve(__dirname, assets.fonts),
        '@images': path.resolve(__dirname, assets.images)
      }
    },
```

Dans la partie `build`, on indique quels sont les fichiers en sortie :&#x20;

```
input: {
          main: path.resolve(__dirname, `${assets.scripts}/main.js`),
          editor: path.resolve(__dirname, `${assets.scripts}/editor.js`)
},
```

Le reste de la configuration n'est pas indispensable à comprendre, il y a :&#x20;

* La configuration du hot reload (css/js/blade.php)
* La copie des images, icônes et fonts dans le dossier public
* La génération du entrypoints.json

</details>