# Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps for laravel application using several common CSS and JavaScript pre-processors.

Laravel Mix compiles and stores your assets in your application's public folder for easy reference.

# Installation Process

When installing Laravel, you'll find a package.json file in the root of the directory structure. The default package.json files includes everything you need to get started. To install Laravel Mix, run the following command.

npm install

# Running Mix

Mix is a configuration layer on top of Webpack, so 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:

// Run all Mix tasks

npm run dev

// 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

# Working With Stylesheets

The webpack.mix.js file is your entry point for all asset compilation. Mix tasks can be chained together to define exactly how your assets should be compile.

Sass

The sass method allows you to compile Sass into CSS.

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

You may compile multiple Sass files into their own respective CSS files and customize the output directory of the resulting CSS:

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

Plain CSS

To concatenate some plain CSS stylesheets into a single file, use the styles method

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

# Working with JavaScript

The mix can compile your latest version of JavaScript code like ECMAScript 2015 into a single JavaScript file. You can use the js() method to compile JavaScript code.

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

You can also combine multiple JvaScript files into a single file using the script() method.

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

# Copying Files & Directories

The copy() method used to move files and directories from one location to another. To move some fonts files from the node_modules folder to another location, you can use this method.

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

When you copy a directory using copy() method, it will flatten the directory structure. To maintain the directory structure simple use copyDirectory() method.

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

# Versioning

The version() method will automatically add the unique hash to the filename when we compile our assets.

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