Laravel Mix Example Tutorial (The Complete Guide)
Laravel Mix allows you to use a single line to describe what you want and it'll use it's preconfigured settings to process it properly. I this example tutorial i will explain how we can use laravel mix in our laravel application.
Laravel Mix is a tool for compiling and optimizing assets in a Laravel app. It's similar to a build tool like gulp, Grunt and such like. it's specific to Laravel but can also be used externally as an npm package.
Required : You will need Laravel 5.6+ and Node 8.10+ installed on your machine.
What is Laravel Mix?
According to Laravel’s Offical Documentation
That is the definition taken straight from the documentation. But what does it all mean? In a nutshell, Laravel Mix compiles, minifies and stores your assets in your application's public folder for easy reference.
Installation Process of Laravel Mix
The only remaining step is to install Laravel Mix. Within a fresh installation of Laravel, you'll find a
package.json file in the root of your directory structure. The default
package.json file includes everything you need to get started.
Think of this like your
composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:
Mix is a configuration layer on top of Webpack, so to run your Mix tasks you only need to execute one of the NPM scripts that is included with the default Laravel
// Run all Mix tasks... npm run dev // Run all Mix tasks and minify output... npm run production
Watching Assets For Changes
npm run watch command will continue running in your terminal and watch all relevant files for changes. Webpack will then automatically recompile your assets when it detects a change:
npm run watch
webpack.mix.js file is your entry point for all asset compilation. Think of it as a light configuration wrapper around Webpack. Mix tasks can be chained together to define exactly how your assets should be compiled
sass method allows you to compile Sass into CSS. You may use the method like so:
Again, you may compile multiple Sass files into their own respective CSS files and even customize the output directory of the resulting CSS:
mix.sass('resources/sass/app.sass', 'public/css') .sass('resources/sass/admin.sass', 'public/css/admin');
If you would just like to concatenate some plain CSS stylesheets into a single file, you may use the
mix.styles([ 'public/css/vendor/normalize.css', 'public/css/vendor/videojs.css' ], 'public/css/all.css');
mix.scripts([ 'public/js/admin.js', 'public/js/dashboard.js' ], 'public/js/all.js');
Copying Files & Directories
copy() method can be used to move files and directories from one location to another. You can use this method if you want to move some fonts files from the node_modules folder to another location.
When you copy a directory using
copy() method, it will flatten the directory structure. To maintain the directory structure simply use
version() method will automatically add the unique hash to the filename when we compile our assets.
mix.js('resources/js/app.js', 'public/js') .version();
Hope this turorial will help you.
Was this article helpful?