Laravel Mix Helper for Kirby
Use the mix helper function to get the correct path to your versioned CSS and JS files generated by Laravel Mix.
Installation
Download
Download and copy this repository to site/plugins/laravel-mix-kirby.
Git submodule
git submodule add https://github.com/Diverently/laravel-mix-kirby.git site/plugins/laravel-mix-kirby
Composer
composer require diverently/laravel-mix-kirby
Laravel Mix
You should also install Laravel Mix, otherwise this plugin is pretty useless ;-) See the installation guide for further information, though it's actually pretty straight forward:
Setup
In your site/config/config.php you can set two options to make this helper work with your specific setup:
diverently.laravel-mix-kirby.manifestPath
This is where the helper function will look for the manifest created by Laravel Mix.
Default: assets/mix-manifest.json
diverently.laravel-mix-kirby.assetsDirectory
This will be prepended to the individual file paths given to the mix() function when creating the final HTML tags.
Default: assets
Options
mix() helper function
The mix() helper function reads the mix-manifest.json file and returns the right HTML tag with the correct path to the requested file. In our example we would call it like so:
<html>
<head>
<!-- ... -->
<?php echo mix('/main.css') ?>
<?php echo mix([
'/additional.css',
'@autocss'
]) ?>
</head>
<body>
<!-- ... -->
<?php echo mix('/main.js') ?>
<?php echo mix([
'/additional.js',
'@autojs'
]) ?>
</body>
</html>And that's it, actually.
Development
- If you haven't already, create a
package.jsoninside your project root:npm init -y - Install Laravel Mix:
npm install laravel-mix --save-dev - Copy the
webpack.mix.jsfile into your root:cp node_modules/laravel-mix/setup/webpack.mix.js ./
After that you can start using Laravel Mix in your project.
webpack.mix.js
See the official documentation for more information.
let mix = require("laravel-mix")
mix.setPublicPath("assets")
mix.browserSync("my-website.dev")
if (mix.inProduction()) {
mix.version()
}
mix
.sourceMaps()
.js("src/js/main.js", "assets")
.sass("src/css/main.scss", "assets")NPM scripts
Add the following NPM scripts to your package.json:
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}License
Credits
The idea behind this originally came from the
mixBlade helper created for the Laravel framework. This is merely a "translation" for the Kirby CMS, only that it also generates the correct HTML tag depending on what file type you request.