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.
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.
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 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
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.
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');
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.
The “copyDirectory” method is used to copy one directory and save it to the new location.
Laravel Mix can automatically install all the necessary plugin for React support. You need to replace the “max.js()” call with “mix.react()”.
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 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.
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: