Install and use Grunt in Magento 2

In this article, we will explore how to install and use Grunt in Magento 2. Grunt is a powerful task runner that can streamline various development processes.

What is grunt ?

Grunt is like a helpful robot for JavaScript that does boring and repetitive jobs automatically. It helps programmers by doing these tasks for them, so they can spend more time on important parts of their projects. In Magento 2, Grunt is especially important because it makes automation of tasks easier, giving developers more time to work on important stuff.

Steps for install and use grunt

Step 1) install node.js in our system

First, we need to install Node.js on our system. Since I am using a Mac, I will download it from the below link.

For Windows / Mac :- https://nodejs.org/en/download/

For Linux / Ubuntu :-

sudo apt-get update
sudo apt-get install nodejs

To check the Version of Node.js you installed

To check the version of Node.js installed after completing these initial steps, type the following command in the terminal

nodejs -v

Step 2) install Grunt CLI

Next, you must install the Grunt CLI. To do so, navigate to the main directory of Magento 2 and execute the following command in your terminal

npm install -g grunt-cli

Step 3) Configure magento project for grunt

Then, navigate to the Magento 2 Root Directory and Rename the specified files as follows:

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

Afterward, include the Node.js dependency by entering the command provided below. Thus, you must run the command from the root directory of Magento:

npm install 
npm update 

Step 4) Grunt configuration

Following that, open the grunt-config.json file and replace the given code with the following:

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

After that, to add your custom theme into the Grunt Configuration, open the file located at <Magento_Root_Directory>/dev/tools/grunt/configs/themes.js. Then, add the provided code snippet below into the file.

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

<vendor_name>: Name of the company or creator.
<theme_name>: The code for your theme, usually matches the name of the theme directory.
<area>: Area code, either frontend or adminhtml.
<language>: Written in the format code_subtag, such as en_US. Only one language can be mentioned here.
<path_to_file>: The route to the main source file, relative to the app/design/frontend/<Vendor>/<theme>/web directory. You must list all main source files of the theme. If your theme inherits from another theme and doesn’t have its own main source files, list the main source files of the parent theme instead.

Grunt – Magento 2 commands

Use the Grunt commands listed below to do different customization jobs in your Magento 2 project. Remember to run all commands from the main directory where Magento 2 is installed.

• grunt clean : This command erases static files linked to your theme from both the pub/static and var/ directories.
• grunt exec : This command refreshes source file links to pub/static/frontend/.
  • grunt exec:<theme_name> : For a specific theme.
• grunt less : compiles .css files by using links from the mentioned directory.
  • grunt less:<theme_name> : For a specific theme.
• grunt watch : To monitor changes in the .css files, source files, recompile and refresh pages in a web browser.
  

That’s everything !!

Thank you for reading this article! Feel free to share your thoughts or ask any questions in the comments section below and spread the word by sharing. I am here to help, so if you encounter any errors or have questions, I will provide you with proper solutions.