Using Grunt for CSS changes

Making changes during the development of your theme can take some time while you are waiting on removing the compiled files, recompiling, and reloading. To optimize the workflow and speed up the reloading of the changes, it is possible to use the built-in client-side Less compiler based on a JavaScript compilation. Using this client compiler might not work fast enough for you and require manual reloads. Another option is to use the Grunt tool to watch changes made in the .less files. In this recipe, we will see how to make use of this tool and update CSS files without the manual removing of files and refreshing the browser.

Getting ready

Using Grunt should only be needed on your local development setup; for production systems, you should use the built-in Magento Less compiler. Grunt is built on Node.js; in order to use it, you should first install Node.js in your system.

How to do it…

This recipe will explain how to install, configure, and use Grunt to monitor file...