How to use grunt in Magento 2?

Grunt in Magento 2 is commonly used for frontend development. Grunt helps automate the compilation of CSS preprocessors like Less, minification of JavaScript files, and other related tasks to improve the performance and maintainability of the storefront. Grunt helps developers to manage complex workflows and improve efficiency.

Magento 2 grunt setup: Step by step instruction

1. Download Node.js 
Install Node.js and npm (Node Package Manager) to your system. You can download it from the official Node.js website

2. Install Grunt Command Line Interface (CLI)
Open the terminal and run the following command:

npm install -g grunt-cli

3. Node.js Dependencies Installation

To install the project dependencies, including Grunt, for your Magento instance, navigate to your Magento instance directory in the command prompt using:

cd <your_Magento_instance_directory>

 Then, run the following commands:

npm install
npm update

4. Integrating Your Theme with Grunt Configuration

To incorporate your theme into the Grunt configuration, navigate to the dev/tools/grunt/configs/themes.js file. Inside this file, include your theme in the module.exports section, following the format illustrated below:

<theme>: {
  area: '<area>',
  name: '<Vendor>/<theme>,
  locale: '<language>',
  files: [
    '<path_to_file1>', 

Following notations are used:

<theme>: Your theme code, should correspond to the theme directory name.

<language>: Specified in the 'code_subtag' format, (e.g., en_US) Only one locale can be specified here. If you want to debug the theme with another locale, create an additional theme declaration with a different value for the language

<path_to_file>: Indicates the path to the root source file, relative to the directory app/design/frontend/<Vendor>/<theme>/web. All root source files of the theme should be specified here. If your theme inherits from another theme and does not contain its own root source files, specify the root source files of the parent theme.

Magento 2 grunt commands:

Now that the installation process is complete, proceed to run the following Grunt commands:

grunt watch: This command is used to start the Grunt tool, which tracks changes made in main files like .less and re-compiles them into CSS files.

grunt exec:<theme>:  This command is used to republish the symlinks for the static view files of a specific theme from the root directory.

grunt clean: When you run this command, it removes static files related to your theme in both pub/static and var directories, providing a clean slate for subsequent deployments or development iterations. Additionally, it may remove any cached or temporary files related to your theme from the var directory.

grunt less: This command processeses all the LESS files in your theme and compiles them into corresponding CSS files. These CSS files are then placed in the pub/static/frontend/<Vendor>/<theme>/<locale>, ensuring that any made changes or customizations made to your theme's styles are applied and reflected in the frontend of your store.