MixEEr

This addon brings Laravel Mix's mix() method to ExpressionEngine's template system.

Preamble

• This addon assumes you've already got your webpack.mix.js file and build tools set up, it does not include the base Laravel Mix build tools, read this if you need help getting started with Laravel Mix.
• Laravel Mix works best when the public path is either a sibling or below its own directory. Therefore, because it's best practice to move ExpressionEngine's system/ directory above the public/ directory, you should setup Laravel Mix as a sibling of the system/ directory.

Here's an example directory structure:

    ├── system/
    │   ├── ee/
    │   └── user/
    │   ├── index.html
    │   ├── index.php
    ├── node_modules/
    ├── public/
    │   ├── assets/
    │   │   ├── css/
    │   │   └── js/
    │   ├── images/
    │   └── themes/
    │   ├── admin.php
    │   ├── favicon.ico
    │   ├── index.php
    │   ├── mix-manifest.json
    ├── resources/
    │   ├── fonts/
    │   ├── js/
    │   └── sass/
    ├── webpack.mix.js
    ├── package.json

• You may be unable to compile assets until you specify the publicPath in your Mix options:

mix.sass('resources/sass/app.scss', 'public/assets/css')
    .js('resources/js/app.js', 'public/assets/js')
    .options({
        publicPath: 'public',
    });

Installation

• Download the MixEEr addon.
• Copy the mix/ directory to the system/user/addons/ directory.
• In ExpressionEngine's control panel go to Developer > Addons and install the plugin.

Usage

Once the plugin is installed you can use the {exp:mix} tag in your templates:

<link rel="stylesheet" href="{exp:mix file='assets/css/app.css'}">
<script src="{exp:mix file='assets/js/app.js'}"></script>

If you are overriding the directory of Laravel Mix's generated mix-manifest.json file you may also pass the manifest_dir parameter:

<link rel="stylesheet" href="{exp:mix manifest_dir='assets/manifest' file='assets/css/app.css'}">