Compiling assets with Laravel Mix

Along with backend API's, artisan commands & all other stuff, if you have frontend built within Laravel application then for sure you will need some sort of CSS pre-processor & something to compile and bundle your assets.

Laravel mix comes handy for these cases for 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. Through simple method chaining, you can fluently define your asset pipeline. In simple words, Laravel Mix is a configuration layer on top of Webpack.

Here is the official documentation.

For example:

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

You will love laravel mix if you are new to the webpack & you wanted to use bundling and asset compilation.

Laravel Mix Installation & Setup

Installing Node

Before triggering Mix, you must first ensure that Node.js and NPM are installed on your machine.(Laravel Homestead includes everything you need be default)

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. You just have to run npm install.

Running Laravel Mix

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:

<span class="hljs-regexp">// Run all Mix tasks...
npm run dev

<span class="hljs-regexp">// 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

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

Working With Stylesheets in Laravel Mix

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.

Less with Laravel Mix

The less method may be used to compile Less into CSS. Let's compile our primary app.less file to public/css/app.css.

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

Multiple calls to the less method may be used to compile multiple files:

mix.less('resources/less/app.less', 'public/css')
   .less('resources/less/admin.less', 'public/css');

If you wish 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/app.less', 'public/stylesheets/styles.css');

Sass with Laravel Mix

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

Stylus with Laravel Mix

Similar to Less and Sass, the stylus method allows you to compile Stylus into CSS:

mix.stylus('resources/stylus/app.styl', 'public/css');

Use Plain CSS with Laravel Mix

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

Working With JavaScript in Laravel Mix

Laravel mix provides several features to help you work with your JavaScript files, such as compiling ECMAScript 2015, module bundling, minification, and concatenating plain JavaScript files. Even better, this all works seamlessly, without requiring an ounce of custom configuration:

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

With this single line of code, you may now take advantage of:

• ES2015 syntax.
• Modules
• Compilation of .vue files.
• Minification for production environments.

Vendor Extraction

One potential downside to bundling all application-specific JavaScript with your vendor libraries is that it makes long-term caching more difficult. For example, a single update to your application code will force the browser to re-download all of your vendor libraries even if they haven't changed.

If you intend to make frequent updates to your application's JavaScript, you should consider extracting all of your vendor libraries into their own file. This way, a change to your application code will not affect the caching of your large vendor.js file. Mix's extract method makes this a breeze:

mix.js('resources/js/app.js', 'public/js')
   .extract(['vue'])

The extract method accepts an array of all libraries or modules that you wish to extract into a vendor.js file. Using the above snippet as an example, Mix will generate the following files:

• public/js/mainfest.js: The Webpack manifest runtime
• public/js/vendor.js: Your vendor libraries
• public/js/app.js: Your application code

Using Environment Variables with Laravel Mix

You may inject environment variables into Mix by prefixing a key in your .env file with MIX_:

MIX_SENTRY_DSN_PUBLIC=http://example.com

After the variable has been defined in your .env file, you may access via the process.env object. If the value changes while you are running a watch task, you will need to restart the task:

process.env.MIX_SENTRY_DSN_PUBLIC

You can modify webpack.config.js file for changes in your configurations.