How to Use Grunt in Magento 2

This tutorial will explain how to compile .less files to install, configure, and use Grunt in Magento 2. The main purpose of Grunt is to simplify repetitive tasks by automating compilation, minification, etc.

In Magento 2, If you want any single change in your theme you need to compulsory deploy again and again if you using the grunt you can easily compile the less and get the output.

Please follow the steps for the how-to configure and use grunt in Magento 2.

1. Step – 1: First of all, You need to install Node.js in your system. You can install it by following the mentioned link.

For, Linux / Ubuntu user you can execute the below commands to install Node.js and check the version:

sudo apt-get update
sudo apt-get install nodejs
nodejs -v

1. 2 Step – 2: Secondly, You need to install Grunt CLI.

To install it, Go to the root directory of Magento 2 and Run this below command in your terminal :

npm install -g grunt-cli

1. 3 Step – 3: Then, Go to Magento 2 Root Directory and Rename the following files:

• From package.json.sample to package.json
• From Gruntfile.js.sample to Gruntfile.js
• From grunt-config.json.sample to grunt-config.json

1. 4 Step – 4: Now, Open the grunt-config.json file and replace the below code :

{"themes": "dev/tools/grunt/configs/local-themes"}

To

{"themes": "dev/tools/grunt/configs/themes"}

You also like to read this : Add custom product image in magento 2

Add custom product image in magento 2

1. 5 Step – 5: After that, To add your Custom Theme to Grunt Configuration open this file

<Magento_Root_Directory>/dev/tools/grunt/configs/themes.js file and add this below code :

module.exports = {
       ...
   <theme_name>: {
   area: 'frontend',
       name: '<vendor_name>/<theme_name>',
       locale: '<language>',
       files: [
       '<path_to_file1>',
       '<path_to_file2>'
   ],
       dsl: 'less'
       ...
},

• <vendor_name>:- Your vendor name.
• <theme_name>:- Your theme code that corresponds to the theme directory name.
• <language>:- The language of your theme specified in the code_subtag (en_US) format.
• <path_to_file >:- The path to the root source file, relative to the directory app/design/frontend/<Vendor>/<theme/>/web.

1. 6 Step – 6: Last, You just need to execute commands :

• grunt clean :- Remove the theme-related static files in the pub/static/frontend/ and var/ directories.
• grunt exec:- To generate symlinks to the source files to pub/static/frontend/
• grunt less:- Compile CSS files using symlinks published in pub/static/frontend/
• grunt watch:- To track changes in source files, recompile .css files, and reload pages in a browser.

-> If you are using for a specific theme then execute commands :

• grunt exec : <theme_name> :- To generate symlinks for a specific theme.
• grunt less : <theme_name> :- To use symlinks published for a specific theme.

After running “grunt watch” will watch the *.less files and if some are changed, it will immediately rebuild the CSS file.

I hope this helps you. For any doubts regarding this topic, please write your doubts in the comments section.

Jayesh Makwana

Author