├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── _config.yml ├── banner.png ├── bin └── mix.js ├── lib ├── config.js └── utils.js ├── package.json ├── renovate.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | *.iml 3 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | banner.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Pooya Parsa 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Laravel MultiMix 4 | 5 |
6 | 7 | 8 | 9 |

10 | 11 | > [Laravel-Mix](https://github.com/JeffreyWay/laravel-mix) helper for projects with complex & multi assets. 12 | 13 | ## 🔥 Getting started 14 | Since [mix](https://laravel.com/docs/5.4/mix) introduced in laravel 5.4 it is recommended to use this package for laravel >= 5.4 projects only. 15 | 16 | Install package: 17 | 18 | ```bash 19 | # NPM 20 | npm install --save-dev laravel-multimix 21 | 22 | # YARN 23 | yarn add --dev laravel-multimix 24 | ``` 25 | 26 | Open your `package.json` and replace ugly scrips section with this: 27 | 28 | ```json 29 | { 30 | "scripts": { 31 | "mix": "node node_modules/laravel-multimix/bin/mix" 32 | } 33 | } 34 | ``` 35 | 36 | Then you can run your tasks with this single command: 37 | 38 | ```bash 39 | # Usage syntax: npm mix [preset=dev] [package=app] 40 | 41 | # Example: run preset hot (with package app) 42 | npm mix hot 43 | 44 | # Example: run preset watch on package bootstrap 45 | npm mix watch bootstrap 46 | ``` 47 | 48 | ### 🎌 Presets 49 | presets are just different sets of flags and envs passed to webpack. 50 | They are basically same as default laravel package.json commands. 51 | 52 | **Available Presets** 53 | 54 | - dev 55 | - watch 56 | - args: `--watch` 57 | - poll 58 | - args: `--watch --watch-poll` 59 | - hot 60 | - args: `--hot --inline` 61 | - entry: `webpack-dev-server` 62 | - production 63 | - env: `production` 64 | 65 | ### 📦 Packages 66 | Packages are optional and available via `MIX_PACKAGE` env. It will do nothing by default. 67 | But is very useful when using with Utils. 68 | The philosophy behind packages is to having separate assets with different build workflow. 69 | This makes builds cleaner, faster and more efficient. 70 | 71 | ### 💁 Utils 72 | Laravel MultiMix exposes some utils constant and functions. 73 | 74 | - **MIX_PACKAGE** : is same as package name argument 75 | - **NPM** : is relative path to `node_modules` 76 | - **VENDOR** : is relative path to `resources/assets/vendor` 77 | - **output(package_name)**: generates path to public with this template: `public/assets/{package}/` 78 | - **OUTPUT**: is output for current MIX_PACKAGE 79 | 80 | See example below for better understanding. 81 | 82 | ### 📚 Example 83 | 84 | ```js 85 | // webpack.mix.js 86 | 87 | const {mix} = require('laravel-mix'); 88 | const {MIX_PACKAGE, NPM, VENDOR, OUTPUT, output} = require('laravel-multimix'); 89 | 90 | /* 91 | |-------------------------------------------------------------------------- 92 | | Bootstrap 93 | | @package bootstrap 94 | |-------------------------------------------------------------------------- 95 | */ 96 | if (MIX_PACKAGE === 'bootstrap') { 97 | // Bootstrap + RTL 98 | // generates public/assets/bootstrap/bootstrap.css 99 | mix.sass('resources/assets/sass/bootstrap.scss', OUTPUT).options({postCss: [require('postcss-rtl')()]}); 100 | } 101 | 102 | /* 103 | |-------------------------------------------------------------------------- 104 | | App 105 | | @package app 106 | |-------------------------------------------------------------------------- 107 | */ 108 | if (MIX_PACKAGE === 'app') { 109 | // JS 110 | // generates public/assets/app/app.js 111 | mix.js('resources/assets/js/app.js', OUTPUT).extract([ 112 | 'jquery', 113 | 'nprogress', 114 | 'swiper', 115 | 116 | ]); 117 | 118 | // CSS 119 | // generates public/assets/app/app.css 120 | mix.styles([ 121 | output('bootstrap') + 'bootstrap.css', 122 | NPM + 'swiper/dist/css/swiper.min.css', 123 | 124 | ], OUTPUT + 'app.css'); 125 | } 126 | ``` 127 | 128 | ## ☂️Common Issues 129 | 130 | **Reload watcher when webpack.mix.js file is udpdated** 131 | See [#1](https://github.com/fandogh/laravel-multimix/issues/1) 132 | 133 | ## 💡 Former & Related projects 134 | 135 | - [laravel-elixir-packager](https://github.com/pi0/laravel-elixir-packager) 136 | - [laravel-elixir-rtl](https://github.com/pi0/laravel-elixir-rtl) 137 | - [laravel-elixirx (deprecated)](https://github.com/pi0/laravel-elixirx) 138 | 139 | ## 🗝 License 140 | The MIT License (MIT) - Copyright (c) 2017 Fandogh - Pooya Parsa 141 | 142 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fandogh/laravel-multimix/32443c92a29a5e2e2ebdcd0e40d762a90acf0799/banner.png -------------------------------------------------------------------------------- /bin/mix.js: -------------------------------------------------------------------------------- 1 | const config = require('../lib/config.js'); 2 | const path = require('path'); 3 | 4 | // Load preset 5 | const args = global.process.argv.splice(2); 6 | 7 | const preset_name = args[0] || config.defaultPreset; 8 | const preset = config.presets[preset_name]; 9 | if (!preset) { 10 | console.log("Invalid preset", preset_name); 11 | console.log("Available presets:", Object.keys(config.presets).join(',')); 12 | global.process.exit(1); 13 | } 14 | 15 | // Set env 16 | global.process.env.NODE_ENV = preset.env || config.defaultEnv; 17 | 18 | // MIX_PACKAGE env 19 | const package_name = args[1] || config.defaultPackage; 20 | global.process.env.MIX_PACKAGE = package_name; 21 | 22 | // Set args 23 | global.process.argv = [global.process.argv[0], global.process.argv[1]].concat(config.baseArgs).concat(preset.args); 24 | 25 | // 'config' arg 26 | global.process.argv.push('--config=' + (preset.config || config.defaultConfig)); 27 | 28 | // Debug 29 | console.log("[MIX] Preset: " + preset_name + " Package: " + package_name); 30 | 31 | // Require entry 32 | require(path.resolve(config.projectRoot, preset.entry || config.defaultEntry)); 33 | -------------------------------------------------------------------------------- /lib/config.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const _ = require('lodash'); 3 | const path = require('path'); 4 | 5 | const defaultConfig = { 6 | defaultEnv: 'development', 7 | defaultPackage: 'app', 8 | defaultPreset: 'dev', 9 | baseArgs: ['--progress', '--hide-modules'], 10 | defaultEntry: './node_modules/webpack/bin/webpack.js', 11 | defaultConfig: './node_modules/laravel-mix/setup/webpack.config.js', 12 | projectRoot: global.process.cwd(), 13 | presets: { 14 | dev: { 15 | args: [] 16 | }, 17 | watch: { 18 | args: ['--watch'] 19 | }, 20 | poll: { 21 | args: ['--watch', '--watch-poll'] 22 | }, 23 | hot: { 24 | entry: 'node_modules/webpack-dev-server/bin/webpack-dev-server.js', 25 | args: ['--hot', '--inline'] 26 | }, 27 | production: { 28 | env: 'production', 29 | args: [] 30 | } 31 | } 32 | }; 33 | 34 | // Base config 35 | const config = Object.assign({}, defaultConfig); 36 | 37 | // Extend config 38 | const userConfigPath = path.resolve(config.projectRoot, 'mix.config.js'); 39 | if (fs.existsSync(userConfigPath)) { 40 | const userConfig = require(userConfigPath); 41 | _.defaultsDeep(config, userConfig); 42 | } 43 | 44 | module.exports = config; -------------------------------------------------------------------------------- /lib/utils.js: -------------------------------------------------------------------------------- 1 | /* 2 | Laravel mix utils 3 | */ 4 | 5 | exports.MIX_PACKAGE = global.process.env.MIX_PACKAGE; 6 | 7 | exports.NPM = './node_modules/'; 8 | exports.VENDOR = './resources/assets/vendor/'; 9 | 10 | exports.output = function (package_name) { 11 | return 'public/assets/' + package_name + '/' 12 | }; 13 | 14 | exports.OUTPUT = exports.output(exports.MIX_PACKAGE); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "laravel-multimix", 3 | "version": "0.0.1", 4 | "description": "Laravel-Mix helper for projects with complex & multi assets", 5 | "main": "lib/utils.js", 6 | "bin": "bin/mix.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 0" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/pi0/laravel-multimix.git" 13 | }, 14 | "author": "Pooya Parsa ", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/pi0/laravel-multimix/issues" 18 | }, 19 | "homepage": "https://github.com/pi0/laravel-multimix#readme", 20 | "dependencies": { 21 | "lodash": "^4.17.11" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | lodash@^4.17.11: 6 | version "4.17.11" 7 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" 8 | --------------------------------------------------------------------------------