Jeffrey Way’s Laravel Mix package provides a fluent API for constructing webpack build steps for your Laravel application utilizing a variety of CSS and JavaScript pre-processors. To put it another way, Mix makes compiling and minifying your application’s CSS and JavaScript files a breeze.
About minification
Minification is the process of minimizing code and markup in the web pages and script files. It’s one of the most common techniques for reducing website load times and bandwidth utilization. Minification dramatically improves site speed and accessibility, directly translating into a better user experience. It’s also useful for people who are browsing your website using a limited data plan and want to reduce their bandwidth usage while surfing the web.
Installation & Setup
Installing Node & Laravel Mix
node -v && npm -v && npm install
Running Mix
Because Mix is a configuration layer on top of webpack, all you have to do to run your Mix tasks is run one of the NPM scripts included in the default Laravel package.json file. All of your application’s CSS and JavaScript assets will be compiled and stored in the public directory when you execute the dev or production scripts.
// Run all Mix tasks…npm run dev
// Run all Mix tasks and minify output…npm run prod
Notifications
Mix will display OS alerts when compiling if they are available, giving you fast feedback on whether the compilation was successful or not. There may be times, though, when you might prefer to turn off these notifications. Triggering Mix on your production server is one such example. The disableNotifications function can be used to turn off notifications.
mix.disableNotifications();