In this article, we will discuss “Laravel Mix”. It’s a wonderful feature of Laravel, which make the assets compiling easy and simple. As we know Laravel application use the several common CSS and JavaScript pre-processors.
Sometimes users have ever been confused and overwhelmed about the starting with Webpack and asset compilation. In that case, you will love Laravel Mix. You can use any asset compiling tool in your application.
In the “webpack.mix.js” file, we will manage all our assets which we need to compile. This file is located at the root of our Laravel application. It’s included in the Laravel package, you don’t need to create this again.
Table of Contents
Installation and Setup
We need to setup node js and npm to continue with the Laravel Mix. If you have already setup node js and npm then no need to follow given steps. You can start directly with Laravel Mix setup.
You can download the node js setup and install it like other software in your system. After successful setup, you can use the following command to check the version of node js and npm.
// Node js version node -v // npm version npm -v
We will discuss more on node js and npm in our future articles.
Laravel Mix
You need to execute the given command to install the required node modules in your Laravel application. You can see all these modules under “app/node_module” directory.
npm install
You’ll find a “package.json” file in the root of Laravel application directory structure. In the “package.json”, all the node dependencies are mentioned, you can change dependencies as per your application requirement.
Executing Mix
Executing Mix tasks are so easy, you only need to execute one of the NPM scripts.
// Run all Mix tasks... npm run dev // Run all Mix tasks and minify output... npm run production
Watching Assets
This given command will continue running in your terminal and watch all the files for changes, Webpack only watches files, which is mentioned in the “webpack.mix.js”. Webpack automatically recompiles our assets when it detects a change.
npm run watch
Working with stylesheets
Laravel Mix provides rich support for multiple CSS pre-processor. Most commonly used CSS pre-processor LESS, SASS or Stylus are easily managed with the Laravel Mix.
Less
The less method is used to compile all less files into the CSS file.
mix.less('resources/less/style.less', 'public/css');
// Multiple less files
mix.less('resources/less/style.less', 'public/css');
.less('resources/less/app.less', 'public/css');
// Compile and save with new name
mix.less('resources/less/style.less', 'public/stylesheets/style.css');
Sass
The sass method is used to compile all sass files into the CSS file.
mix.sass('resources/sass/style.scss', 'public/css');
// Multiple sass files
mix.sass('resources/sass/style.scss', 'public/css');
.sass('resources/sass/app.scss', 'public/css');
// Custom filename
mix.sass('resources/sass/style.scss', 'public/css/app.css');
Copying Files & Directories
The “copy” method is used to copy a file and save it to the new location.
mix.copy('../path/file.css', 'public/css/file.css');
The “copyDirectory” method is used to copy one directory and save it to the new location.
mix.copyDirectory('assets/directory', 'public/');
Working with JavaScript
Laravel Mix provides rich support for JavaScript and other js frameworks such as Vue Js, React Js or etc. Such as compiling ECMAScript 2015, module bundling, minification, concatenating plain JavaScript files, and many more. All these work handles by Laravel Mix very easily.
mix.js('resources/js/app.js', 'public/js')
React
Laravel Mix can automatically install all the necessary plugin for React support. You need to replace the “max.js()” call with “mix.react()”.
mix.react('resources/js/app.jsx', 'public/js');
Versioning
The “version()” method will automatically add the unique hash to the filename when we compile our assets.
mix.js('resources/js/style.js', 'public/js')
.version();
BrowserSync Reloading
BrowserSync is automatically monitoring all files for new changes, and update changes to the browser. There is no need to manually refresh the browser.
// You need to call the given method to add the support.
mix.browserSync('domain.test');
You need to add a string (proxy) or object (BrowserSync settings) to this method. After that, you can run the “npm run watch” command. Now, when we modify our files, browser sync instantly refreshes the page to reflect your changes.
Conclusion
In this article, we are discussing the Laravel Mix. We personally recommend this to you, check the official documentation related with Laravel Mix. Please feel free to add the comment if any query or you can submit your feedback 🙂
You may like:
How to fix Laravel Syntax Error or Access Violation 1071
LaRecipe: Create Beautiful Documentation with Markdown in Laravel Project
Explanation of Laravel Localization
If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee