Despite the name, Laravel Mix isn’t just for Laravel. It is a tidy, succinct task runner with understandable syntax and a single config file. This tutorial will run through setting it up with your project

Intro

I am a massive advocate of Gulp and have used it for years. However, there is a new player in town and. for all my side projects it knocks the socks off Gulp.  Laravel Mix is a Webpack wrapper - this means it uses its own config files while benefiting from the greatness that is Webpack.

It’s created by Jeffery Way, the author of Laravel, which is where I assume it gets its name from but you don’t need to have a Laravel powered app to utilise its power. There are plenty of plugins available too. We will set up Laravel Mix with SCSS, ES6 compilation, image optimisation and run it alongside Eleventy.

Objectives

This blog post uses the command line to install tools via npm, along with using SCSS. It is USEFUL if you are familiar with using these tools.

We are going to:

• Install Laravel Mix
• Compile SCSS and JS
• Copy and optimise images while making .webp versions

#laravel