Downloads
Stars
Version
Use the mix
helper function to get the correct path to your versioned CSS and JS files generated by Laravel Mix.
Download and copy this repository to site/plugins/laravel-mix-kirby
.
git submodule add https://github.com/Diverently/laravel-mix-kirby.git site/plugins/laravel-mix-kirby
composer require diverently/laravel-mix-kirby
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:
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
mix()
helper functionThe 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.
package.json
inside your project root: npm init -y
npm install laravel-mix --save-dev
webpack.mix.js
file 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")
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"
}
The idea behind this originally came from the
mix
Blade 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.