Getting Started With Laravel Mix

Posted on: November 25, 2019 by Afolayan

Laravel Mix, in a nutshell, is a tool that compiles, minifies and stores your assets in your application’s public folder for easy reference.

In this article, you’ll learn the following:

How to Install LaravelMix in a Laravel application
How to use Laravel Mix in other development environments
Compiling assets with Laravel Mix

How to Install laravelMix in A Laravel Application:

LaravelMix comes installed by default in all Laravel applications from version 5.6 and up. Hence, the only additional step involved is to open up a terminal window and run npm install

How to Use LaravelMix in a non-Laravel environment.

Apart from LaravelMix being a tool that ships with Laravel, it also comes as an NPM package and is available for use in most development environments. To install LaravelMix simply head over to your project’s root directory and run the following commands:

npm init -y
npm install laravel-mix --save-dev
cp -r node_modules/laravel-mix/setup/webpack.mix.js ./

On success, the command installs LaravelMix into your node_modules folder and moves a copy to your root folder.

How to Run LaravelMix

LaravelMix is a configuration layer on top of Webpack, so to run your LaravelMix tasks you only need to execute one of the NPM scripts that is included with the default Laravel package.json file:

// Run all Mix tasks…
 npm run dev

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

Watching Assets For Changes With LaravelMix 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

You may find that in certain environments Webpack isn’t updating when your files change. If this is the case on your system, consider using the watch-poll command:

npm run watch-poll

If you have had some experience with using gulp or grunt, you’d find out pretty quick that LaravelMix works similarly and serves almost the same feature without the stress of having to configure everything manually.

Common LaravelMix Use Cases

Here are some common use cases where you’d find Laravel mix really handy in compiling assets:

Compiling Less Stylesheetsnwith LaravelMix:

Laravel mix provided a less() method for compiling Less files into CSS files. the syntax generally is:

// A single less file
mix.less('resources/less/style.less', 'public/css');

//Compile Multiple less files
mix.less('resources/less/style.less', 'public/css');
   .less('resources/less/app.less', 'public/css');

// If you desire to customize the file name of the compiled CSS, you may pass a full file path as the second argument to the less method:
mix.less('resources/less/style.less', 'public/stylesheets/style.css');

Compiling JavaScript with LaravelMix

LaravelMix compiles your latest version of JavaScript code like eg es6, es5 etc into a single JavaScript file. The js() method is used in compiling JavaScript code.

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

With the single line of code above, you can easily compile ES6 code, as well as .vue files, modules and minification for the production environment.

You would also find LaravelMix handy when you need to combine multiple JavaScript files into a single file using the scripts() method.

Compiling Sass files with LaravelMix

LaravelMix provides a sass() method for compiling Sass files into CSS. The general syntax for compiling Sass code to CSS is Similar to:

// Compiling a single CSS file
mix.sass('resources/sass/style.scss', 'public/css');

// Multiple sass files to one CSS file
mix.sass('resources/sass/style.scss', 'public/css');
   .sass('resources/sass/app.scss', 'public/css');

// compile Sass into CSS with a custom filename
mix.sass('resources/sass/style.scss', 'public/css/app.css');

Concatenating or Joining Multiple CSS files into a single file with LaravelMix

Laravel mix also provides us with a styles() method which is used to combine multiple CSS files into a single file. The syntax for this is similar to:

// combining bootstrap.css and custom.css into all.css
mix.styles([
    'public/css/vendor/bootstrap.css',
    'public/css/vendor/custom.css'
], 'public/css/all.css');

Copying Files and Folders with LaravelMix

You can copy files from one directory to another with the help of the copy() method that LaravelMix provides us with.

LaravelMix also provides us with a copyDirectory() method to maintain the directory structure in a situation whereby using the copy() method would flatten the directory structure eg:

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

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

More Laravel Mix Methods

The code block below highlights many other methods the laravelMix API provides us with:

// Laravel Mix Methods
// mix.js(src, output);
// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.standaloneSass('src', output); <-- Faster, but isolated from Webpack.
// mix.fastSass('src', output); <-- Alias for mix.standaloneSass().
// mix.less(src, output);
// mix.stylus(src, output);
// mix.postCss(src, output, [require('postcss-some-plugin')()]);
// mix.browserSync('my-site.dev');
// mix.combine(files, destination);
// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
// mix.copy(from, to);
// mix.copyDirectory(fromDir, toDir);
// mix.minify(file);
// mix.sourceMaps(); // Enable sourcemaps
// mix.version(); // Enable versioning.
// mix.disableNotifications();
// mix.setPublicPath('path/to/public');
// mix.setResourceRoot('prefix/for/resource/locators');
// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
// mix.options({
//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
//   purifyCss: false, // Remove unused CSS selectors.
//   uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
// });

If you’d want to do some more study on LaravelMix, it would do you plenty good to check out the official documentation for more features, use cases and demos. Meanwhile, feel free to leave a comment below with our opinions.