Laravel Mix a Brief Note

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.

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

LaravelLaravel 5.7Laravel MixLaravel5Laravel5.6LESSSCSS
Comments (0)
Add Comment