AppDividend
Latest Code Tutorials

Laravel Mix For Compiling Assets Tutorial

Laravel Mix

3 8,150

Get real time updates directly on you device, subscribe now.

Laravel Mix For Compiling Assets Tutorial is today’s leading topic. If you’ve ever been confused and overwhelmed about getting started with Webpack and asset compilation, you will love Laravel Mix. It allows you to use a single line to describe what you want and it will use it’s preconfigured settings to process it correctly. It provides a fluent API for defining Webpack build steps for your application using several common CSS and JavaScript pre-processors.

Laravel Mix Tutorial

We are using Laravel 5.6 for this tutorial. Now, First, we need to install the brand new Laravel project and then install Mix.

Step 1: Install Laravel 5.6

Go to your terminal and type the following.

composer create-project laravel/laravel mix --prefer-dist

Now, after installing, go into the project directory and open the package.json file. It has devDependencies like the following.

 "devDependencies": {
        "axios": "^0.17",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
}

So basically, what we need is to hit the following command to install our dependencies local in our project.

npm install

It will grab all the packages and dump in the node_modules folder inside our root directory.

Note: If you have any problem then check out your Node.js version. The latest Node.js version is preferable.

Step 2: Running Mix.

A mix is a configuration layer on top of Webpack, so to run the Mix tasks you only need to execute one of the NPM scripts that are 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

Laravel 5.6 Mix Tutorial With example From Scratch

It will compile our CSS and JS files and put the build inside a public folder. We then include this CSS and JS files inside our master blade file. You can see the code inside the file webpack.mix.js file. The webpack.mix.js file resides in the Laravel project root folder.

// webpack.mix.js

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

First, we have required the mix module and then call its different methods. We can chain those methods.

Less Files

The less method used to compile Less into CSS. First, let us create one new folder inside resources  >> assets directory called less. Now in that folder make one file call app.less.

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

.title {
  color: @light-blue;
}

Now, we need to include this class in the welcome.blade.php file. So we can see the changes.

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="flex-center position-ref full-height ">
            <div class="content">
                <div class="title">
                    Laravel
                </div>
            </div>
        </div>
    </body>
</html>

Now, write the code inside a webpack.mix.js file.

// webpack.mix.js

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

Okay, so we have written the code to compile the less code into the css code. Start the webpack compilation process by hitting the following command.

 

npm run watch

Also, we need to include the app.css file inside the welcome.blade.php file.

<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"/>

Now, you can start the Laravel server.

php artisan serve

Go to the http://localhost:8000. You can see the changes are reflected in the file.

Sass Files

The sass method allows you to compile Sass into CSS. You may use the way like so.

Related Posts
1 of 41
// webpack.mix.js

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

So you can use sass files same as less files.

Stylus Files

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

// webpack.config.js

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

PostCSS Files

PostCSS, a powerful tool for transforming your CSS, is included with Laravel Mix out of the box.

// webpack.config.js

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
    postCss: [
       require('postcss-css-variables')()
    ]
});

Source Maps

Though disabled by default, source maps may be activated by calling the mix.sourceMaps() method in your webpack.mix.js file.

// webpack.mix.js

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

Javascript Files.

The 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.

mix.js('resources/assets/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.

React

Mix can automatically install the Babel plug-ins necessary for React support. To get started, replace your mix.js() call with mix.react().

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

Vanilla JS

// webpack.mix.js

mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

So this is how you can use Laravel Mix to compile your assets.

3 Comments
  1. A fan of yours says

    What about jquery?

  2. Anuj says

    any tutorial of installing npm packages for example chart.js or any other from npm and use those install packages on laravel?

  3. The boss says

    Ca sert à quoi de recopier la doc laravel ?!

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.