How to use grunt in Magento 2?

Before starting the installation, Please rename the existing files package.json.sample and Gruntfile.js.sample in your root folder as package.json and Gruntfile.js respectively.

Follow the below steps 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

Install 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:

Copy Code

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 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 recompile the changes simultaneously.

Cheers!

Helpful resources: