TLDR; Build tools are great for processing style and scripting files, they also compress and minify these files to make them lighter and help reduce a websites carbon footprint. Laravel Mix is a great example of a build tool with a low learning curve if you are looking to start using one.
I’ve given a few talks on digital sustainability over the past year or so and the key thing that we can measure when it comes to a websites carbon footprint is its front end weight. With this in mind, I always tell people to compress everything they can, for some this may mean installing a plugin to minify everything automatically but what if this isn’t an option? Images you can handle fairly straightforward with something like ImageOptim or TinyPNG but what about CSS and JS files?
Say hello to build tools!
Within the ever-changing landscape of front end dev, you’ve probably heard of at least one; whether it’s Gulp or Grunt or Webpack, which are all incredibly powerful and great at what they do. How they work overall is fairly similar; they have an input file that gets processed and saved in a new directory (or the same if you set it up this way) but they all have different syntaxes and different learning curves.
There’s also a few developers that absolutely hate them due to the whole complex ecosystem needed for them to operate – with them relying on numerous NPM packages to work and when things go wrong are very difficult to fix. NPM version issues and package version issues do happen and are incredibly infuriating.
To help with these issues and to help lower the learning curve I recommend Laravel Mix for those who work with Laravel as a PHP framework should know it fairly well as it’s baked in to manage the front end work of any project. Luckily, Mix has been separated out into its own package to make it usable with any project regardless of platform.
Getting started with Laravel Mix
Getting started is pretty straight forward. All you need is NPM to install it and create a basic config file.
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
Example of a basic config file for Laravel Mix.
As you can see in this example, I’m telling Mix to compile and minify app.js as well as app.scss (I write in Sass but Mix supports Less, Stylus and PostCSS to give you more flexibility).
To help with your workflow too, you can add commands to your package.json file to run Mix when necessary – this can be hooked into a deployment script too so you don’t have compiled files in your git repo (another conversation if you don’t already use version control and automated deployments).
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
Scripts for Mix.
I can’t recommend this build tool enough, while I’ve used others, when they break it’s very infuriating, so I like to use something so I can focus on what I do best – write good, well structured, easy to read code that gets processed into something even better.
You can find out more about Laravel Mix here: https://laravel-mix.com/