How to use grunt in Magento 2?

• Step 1: Install Node.js
• Step 2: Install Grunt CLI
• Step 3: Install Node.js dependencies
• Step 4: Add a theme to Grunt configuration
• Step 5: Run Grunt commands

Step 1: Install Node.js

First, we need to install a stable version of Node.js.

Step 2: Install Grunt CLI

Now install the Grunt CLI tool globally by the following command:

npm install -g grunt-cli

Step 3: Install Node.js dependencies

nstall the node.js project dependencies, including Grunt, for your Magento instance. To do this, run the following commands in the command prompt:

cd <your_Magento_instance_directory> npm install npm update

Step 4: Add a theme to Grunt configuration

Add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/themes.js file, add your theme in module.exports as shown below:

module.exports = {
                                ...
                                <theme>: {
                                area: 'frontend',
                                    name: '<Vendor>/<theme>',
                                    locale: '<language>',
                                    files: [
                                    '<path_to_file1>', //path to root source file
                                    '<path_to_file2>'
                                ],
                                    dsl: 'less'
                                    ...
                                },
                            }

Where the following notations are used:

<theme>: Your theme code, conventionally should correspond to the theme directory name.
<language>: specified in the ‘code_subtag’ format, for example, en_US. Only one locale can be specified here. To debug the theme with another locale, create one more theme declaration, having specified another value for language.
<path_to_file >: the path to the root source file, relative to the directory app/design/frontend/<Vendor>/<theme/>/web. You need to specify all root source files of the theme. If your theme inherits from a certain theme and does not contain its root source files, specify the root source files of the parent theme.

Step 5: Run Grunt commands

Now the installation process is completed, the next step is to run the Grunt commands:

grunt clean: This command removes static files related to your theme in both pub/static and var directories.

grunt exec: This one republishes source files symlinks to
pub/static/frontend/<Vendor>/<theme>/<locale>

grunt less: This command compiles all the CSS file using the symlinks in this location
pub/static/frontend/<Vendor>/<theme>/<locale>

grunt watch: This command is used to start the grunt tool to track the changes done in the main files like .less and re-compiles them into CSS files.

Every time you change any of this in the source file, grunt watch will show a notification in the terminal about the specific change and recompiles the changes simultaneously.

Cheers!