<img src="https://github.com/pi0/laravel-multimix/raw/master/banner.png" width="300px" alt="Laravel MultiMix">
<img alt="" src="https://img.shields.io/npm/v/laravel-multimix.svg?style=flat-square">
Laravel-Mix helper for projects with complex & multi assets.
🔥 Getting started
Since mix introduced in laravel 5.4 it is recommended to use this package for laravel >= 5.4 projects only.Install package:
# NPM
npm install --save-dev laravel-multimix
# YARN
yarn add --dev laravel-multimixOpen your
package.json and replace ugly scrips section with this:
```json
{
"scripts": {"mix": "node node_modules/laravel-multimix/bin/mix"}# Usage syntax: npm mix [preset=dev] [package=app]# Example: run preset hot (with package app)npm mix hot# Example: run preset watch on package bootstrapnpm mix watch bootstrap🎌 Presets
presets are just different sets of flags and envs passed to webpack. They are basically same as default laravel package.json commands. Available Presets- dev
- watch
- args: `--watch`- poll
- args: `--watch --watch-poll`- hot
- args: `--hot --inline`- entry: `webpack-dev-server`- production
- env: `production`📦 Packages
Packages are optional and available viaMIX_PACKAGE env. It will do nothing by default.
But is very useful when using with Utils.
The philosophy behind packages is to having separate assets with different build workflow.
This makes builds cleaner, faster and more efficient.
💁 Utils
Laravel MultiMix exposes some utils constant and functions.- MIXPACKAGE : is same as package name argument
- NPM : is relative path to
node_modules
- VENDOR : is relative path to
resources/assets/vendor
- output(packagename): generates path to public with this template:
public/assets/{package}/
- OUTPUT: is output for current MIXPACKAGE
📚 Example
```js // webpack.mix.js const {mix} = require('laravel-mix'); const {MIXPACKAGE, NPM, VENDOR, OUTPUT, output} = require('laravel-multimix'); / |-------------------------------------------------------------------------- | Bootstrap | @package bootstrap |-------------------------------------------------------------------------- / if (MIXPACKAGE === 'bootstrap') {// Bootstrap + RTL// generates public/assets/bootstrap/bootstrap.cssmix.sass('resources/assets/sass/bootstrap.scss', OUTPUT).options({postCss: [require('postcss-rtl')()]});// JS// generates public/assets/app/app.jsmix.js('resources/assets/js/app.js', OUTPUT).extract(['jquery','nprogress','swiper',]);// CSS// generates public/assets/app/app.cssmix.styles([output('bootstrap') + 'bootstrap.css',NPM + 'swiper/dist/css/swiper.min.css',], OUTPUT + 'app.css');