---
title: "How to Use Grunt in Magento 2"
url: "https://dolphinwebsolution.com/how-to-use-grunt-in-magento-2"
date: "2021-07-06T12:21:26+05:30"
modified: "2023-08-28T05:40:46+05:30"
author:
  name: "Jayesh Makwana"
categories:
  - "Magento"
word_count: 531
reading_time: "3 min read"
summary: "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, minific..."
description: "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 ..."
keywords: "use grunt in magento 2, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Set Custom Validation Message in Magento 2"
    url: "https://dolphinwebsolution.com/set-custom-validation-message-in-magento-2"
  - title: "11 Reasons Why Your Business Needs an eCommerce Website Today"
    url: "https://dolphinwebsolution.com/blog/why-e-commerce-website-is-most-important-for-your-business/"
  - title: "How to create custom indexer in Magento 2 ?"
    url: "https://dolphinwebsolution.com/how-to-create-custom-indexer-in-magento-2"
---

# How to Use Grunt in Magento 2

_Published: July 6, 2021_  
_Author: Jayesh Makwana_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/blog-post-1-1024x614.png)

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](https://dolphinwebsolution.com/how-to-add-custom-product-image-role-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.](https://magento.stackexchange.com/questions/137794/magento-2-how-to-change-default-date-format-every-where-in-magento)
- **<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.


---

_View the original post at: [https://dolphinwebsolution.com/how-to-use-grunt-in-magento-2](https://dolphinwebsolution.com/how-to-use-grunt-in-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:54:28 UTC_