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

  1. If you haven’t already, create a package.json inside your project root: npm init -y
  2. Install Laravel Mix: npm install laravel-mix --save-dev
  3. Copy the 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")

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

MIT

Credits

Robert Cordes

Diverently

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.