Laravel Compiling Assets

Laravel Compiling Assets

Laravel Mix

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

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

Installation & Setup

Running Mix

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run production

Working With Stylesheets

Working With JavaScript

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

Versioning / Cache Busting

Mix.js('resources/js/app.js', 'public/js')
   .version();
<link rel="stylesheet" href="https://laravel.com/docs/5.7/{{ mix('/css/app.css') }}">
Mix.js('resources/js/app.js', 'public/js');

if (mix.inProduction()) {
    mix.version();
}

Browsersync Reloading

Can automatically monitor your files for changes, and inject your changes into the browser without requiring a manual refresh.

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

// Or...

// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.test'
});

Environment Variables

MIX_SENTRY_DSN_PUBLIC=http://example.com
Process.env.MIX_SENTRY_DSN_PUBLIC

Notifications

Mix.disableNotifications();

Laravel Compiling Assets — Structure map

Clickable & Draggable!

Laravel Compiling Assets — Related pages: