Skip to content
Laravel-Mix helper for projects with complex & multi assets.
Branch: master
Clone or download
pi0 Merge pull request #5 from fandogh/renovate/all-minor-patch
Update dependency lodash to ^4.17.11
Latest commit 32443c9 Nov 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin Initial Commit Mar 26, 2017
lib Add missing args in production preset Mar 26, 2017
.gitignore Initial Commit Mar 26, 2017
.npmignore Initial Commit Mar 26, 2017
LICENSE Initial commit Mar 26, 2017
README.md Correct Link Mar 27, 2017
_config.yml Set theme jekyll-theme-slate Mar 26, 2017
banner.png Initial Commit Mar 26, 2017
package.json Update dependency lodash to ^4.17.11 Nov 4, 2018
renovate.json Update renovate.json Nov 4, 2018
yarn.lock Update dependency lodash to ^4.17.11 Nov 4, 2018

README.md

Laravel MultiMix

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-multimix

Open your package.json and replace ugly scrips section with this:

  {
    "scripts": {
      "mix": "node node_modules/laravel-multimix/bin/mix"
    }
  }

Then you can run your tasks with this single command:

    # Usage syntax: npm mix [preset=dev] [package=app]
    
    # Example: run preset hot (with package app)
    npm mix hot
    
    # Example: run preset watch on package bootstrap
    npm 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 via MIX_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.

  • MIX_PACKAGE : is same as package name argument
  • NPM : is relative path to node_modules
  • VENDOR : is relative path to resources/assets/vendor
  • output(package_name): generates path to public with this template: public/assets/{package}/
  • OUTPUT: is output for current MIX_PACKAGE

See example below for better understanding.

📚 Example

// webpack.mix.js

const {mix} = require('laravel-mix');
const {MIX_PACKAGE, NPM, VENDOR, OUTPUT, output} = require('laravel-multimix');

/*
 |--------------------------------------------------------------------------
 | Bootstrap
 | @package bootstrap
 |--------------------------------------------------------------------------
 */
if (MIX_PACKAGE === 'bootstrap') {
    // Bootstrap + RTL
    // generates public/assets/bootstrap/bootstrap.css
    mix.sass('resources/assets/sass/bootstrap.scss', OUTPUT).options({postCss: [require('postcss-rtl')()]});
}

/*
 |--------------------------------------------------------------------------
 | App
 | @package app
 |--------------------------------------------------------------------------
 */
if (MIX_PACKAGE === 'app') {
       // JS
       // generates public/assets/app/app.js
       mix.js('resources/assets/js/app.js', OUTPUT).extract([
           'jquery',
           'nprogress',
           'swiper',
           
       ]);
   
       // CSS
       // generates public/assets/app/app.css
        mix.styles([
           output('bootstrap') + 'bootstrap.css',
           NPM + 'swiper/dist/css/swiper.min.css',
           
       ], OUTPUT + 'app.css');
}

☂️Common Issues

Reload watcher when webpack.mix.js file is udpdated
See #1

💡 Former & Related projects

🗝 License

The MIT License (MIT) - Copyright (c) 2017 Fandogh - Pooya Parsa

You can’t perform that action at this time.