Laravel-Mix helper for projects with complex & multi assets.
MIT License
Laravel-Mix helper for projects with complex & multi assets.
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 are just different sets of flags and envs passed to webpack. They are basically same as default laravel package.json commands.
Available Presets
--watch
--watch --watch-poll
--hot --inline
webpack-dev-server
production
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.
Laravel MultiMix exposes some utils constant and functions.
node_modules
resources/assets/vendor
public/assets/{package}/
See example below for better understanding.
// 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');
}
Reload watcher when webpack.mix.js file is udpdated See #1
The MIT License (MIT) - Copyright (c) 2017 Fandogh - Pooya Parsa