Basic introduction of Laravel Mix for front end developer.

Laravel 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.
For example :

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

If you’ve ever been confused and overwhelmed about getting started with Webpack and asset compilation, you will love Laravel Mix. However, you are not required to use it while developing your laravel development application; you are free to use any asset pipeline tool you wish or even none at all.

Installing Node
Laravel Homestead includes everything you need; however, if you aren’t using Vagrant, then you can easily install the latest version of Node and NPM using simple graphical installers from https://nodejs.org/en/download/

Laravel Mix
The only remaining step is to install Laravel Mix. 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. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running: 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.jsonfile:
// 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

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

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

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'); If you need to override the underlying Less plug-in options, you may pass an object as the third argument to mix.less(): mix.less('resources/less/app.less', 'public/css', { strictMath: true });
Sass
The sass method allows you to compile Sass into CSS. mix.sass('resources/sass/app.scss', 'public/css');
Stylus
The stylus method allows you to compile Stylus into CSS. mix.stylus('resources/stylus/app.styl', 'public/css');

PostCSS

PostCSS, a powerful tool for transforming your CSS, is included with Laravel Mix out of the box. By default, Mix leverages the popular Autoprefixer plug-in to automatically apply all necessary CSS3 vendor prefixes. However, you’re free to add any additional plug-ins that are appropriate for your application. First, install the desired plug-in through NPM and then reference it in your webpack.mix.js file:

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

Plain CSS

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

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

URL Processing

For CSS compilation, Webpack will rewrite and optimize any url()calls within your stylesheets. While this might initially sound strange, it’s an incredibly powerful piece of functionality. Imagine that we want to compile Sass that includes a relative URL to an image:

.example { background: url('../images/example.png'); }

• Source Maps

Though disabled by default, source maps may be activated by calling the mix.sourceMaps() method in your webpack.mix.js file. Though it comes with a compile/performance cost, this will provide extra debugging information to your browser’s developer tools when using compiled assets.

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

Working With JavaScript

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.

Vue
mix.js('resources/js/app.js', 'public/js') .extract(['vue'])
React
mix.react('resources/js/app.jsx', 'public/js');
Vanilla JS
mix.scripts([ 'public/js/admin.js', 'public/js/dashboard.js' ], 'public/js/all.js');