I'm not a big fan of complex build setups. So this is the easiest way to compile JavaScript and Sass1 files with live reloading I could come up with. The only files I added to Kirby's plainkit2 are a package.json and assets.config.js. If you want to use this setup elsewhere, just copy these files to your Kirby project.
✨ Bundles and minifies JavaScript with esbuild.
🎨 Compiles and minifies Sass with esbuild, esbuild-sass-plugin and autoprefixer.
⚡ Live reloading with Browsersync for files in assets/, content/ and site/.
🐘 Automatically sets the .test domain for Laravel Valet.
Run npm install to install the dependencies I defined in the package.json. Run npm run dev to start the development server.
Have a look at assets.config.js to see how to configure the build process. By default the script compiles assets/js/main.js and assets/scss/style.scss but you can change this by editing the jsFiles and cssFiles variables.
I tried to keep it as simple as possible and commented the file as good as I could. If you have any questions, feel free to open an issue.
Footnotes
-
I tried switching to PostCSS and native CSS nesting but I didn't like it. For now I'll stick with Sass. ↩
-
Please refer to Kirby's Plainkit repository for more information about Kirby and their license. ↩