What is Grunt?

Normally when you write CSS, a task runner or compiler is not needed. You write CSS, and it’s outputted to the browser. But Magento uses Less, which extends CSS to add support for variables, mixins, nesting, math operations, functions & more. This makes CSS a bit easier to write and maintain in the long run.

Less.js is a JavaScript compiler tool that converts this special Less code to standard CSS code. Without any extra tools, LESS can be compiled in two different ways in Magento; server-side, which is the default mode, and client-side.

• Server-side compilation mode (default): LESS file is compiled with PHP LESS library. In developer mode, PHP will generate the CSS files on the fly provided there is not one already. Running static content deploy will compile the stylesheet. This is the mode that is run in production.
• Client-side compilation mode: LESS files are compiled client-side on every page load, which results in slow response times and "flash of unstyled text" (FOUT) issues. This is the mode that is typically recommended for theme development.

If you weren’t using any kind of extra tooling, you’d normally set this to Client side compilation. However, working with this mode in theme development is a huge pain. The backend process of compiling these assets is extremely slow, and there’s a much better way when doing theme development, and that is by using Grunt.

Grunt is an automator that performs repetitive tasks for you such as minifcation, compilation, unit testing, linting, etc. It is similar to a lot of other tools out there such as Gulp, Webpack & Vite.

We can keep this workflow type set to Server side, and use Grunt instead. Magento comes with Grunt support built-in, but we will need to install & configure it before using it, so let’s get to it.