Laravel 8.x Mix Example Tutorial (The Complete Guide)

In this tutorial i will show you how to use Laravel Mix in your Laravel application. Laravel Mix provides a fluent API for defining Webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. 

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 

Laravel Mix provides a fluent API for defining Webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors.

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:

npm install

Running Mix

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 package.json file:

Read also : User Roles and Permissions Tutorial in Laravel without Packages

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run production

Watching Assets For Changes

The 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

Working With Stylesheets

The 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

The sass method allows you to compile Sass into CSS. You may use the method like so:

mix.sass('resources/sass/app.scss', 'public/css');

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');

Plain CSS

If you would just like to concatenate some plain CSS stylesheets into a single file, you may use the styles method.

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

Working With JavaScript

The mix can compile your latest version of JavaScript code like ECMAScript 2015 (and so on…) into a single JavaScript file. You can use the js() method to compile JavaScript code.

mix.js('resoureces/app.js', 'public/js');

You can also combine multiple JavaScript files into a single file using the scripts() method.

mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

Copying Files & Directories

The 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.

mix.copy('node_modules/font-awesome/fonts/*', 'public/fonts/');

When you copy a directory using copy() method, it will flatten the directory structure. To maintain the directory structure simply use copyDirectory() method.

mix.copyDirectory('resources/img', 'public/img');

Versioning

The 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.