laravel-mix

What is laravel-mix?

Laravel Mix is a wrapper around Webpack that simplifies the process of defining Webpack build steps for your Laravel application. It provides a clean, fluent API for defining basic Webpack build steps for your application, such as compiling Sass, Less, or Stylus, and bundling up your JavaScript files.

What are laravel-mix's main functionalities?

Compiling Sass

This feature allows you to compile Sass files into CSS. The code sample demonstrates how to compile a Sass file located at 'resources/sass/app.scss' and output the resulting CSS to 'public/css'.

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

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

Bundling JavaScript

This feature allows you to bundle JavaScript files. The code sample shows how to bundle a JavaScript file located at 'resources/js/app.js' and output the resulting bundle to 'public/js'.

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

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

Versioning Files

This feature allows you to version your compiled files, which is useful for cache busting. The code sample demonstrates how to version the bundled JavaScript file.

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

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

BrowserSync

This feature allows you to automatically refresh your browser when files are changed. The code sample shows how to set up BrowserSync to proxy your local development server.

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

mix.browserSync('my-domain.test');

Copying Files

This feature allows you to copy files or directories from one location to another. The code sample demonstrates how to copy all files from 'resources/images' to 'public/images'.

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

mix.copy('resources/images', 'public/images');

Other packages similar to laravel-mix

webpack

Webpack is a module bundler that takes modules with dependencies and generates static assets representing those modules. It is more flexible and powerful than Laravel Mix but requires more configuration and setup.

gulp

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow. It is more task-oriented compared to Laravel Mix and requires you to define tasks using JavaScript.

grunt

Grunt is a JavaScript task runner that automates repetitive tasks like minification, compilation, unit testing, and linting. It is similar to Gulp but uses a configuration-over-code approach.

parcel

Parcel is a web application bundler that offers a zero-configuration setup. It is simpler to use compared to Laravel Mix and Webpack but may not offer as much flexibility for complex configurations.

README

Introduction

Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your applications. Mix supports several common CSS and JavaScript pre-processors.

If you've ever been confused about how to get started with module bundling and asset compilation, you will love Laravel Mix!

Documentation

You may review the initial documentation here.

License

Laravel Mix is open-sourced software licensed under the MIT license.