• support@hikmadh.in
  • +91 97885 33992
GET FREE QUOTE

How to Use Grunt in Magento 2

How to Use Grunt in Magento 2

When working with Magento 2, frontend development can become repetitive and time-consuming. Tasks like compiling LESS files, minifying CSS/JS, and watching file changes manually can slow you down.

That’s where Grunt comes in.

Grunt is a powerful JavaScript task runner that automates frontend workflows in Magento 2, making development faster, cleaner, and more efficient.

What is Grunt in Magento 2?

Grunt is used in Magento 2 to:

  • Compile LESS files into CSS
  • Minify CSS and JavaScript
  • Watch file changes automatically
  • Speed up frontend development

Instead of running multiple commands manually, Grunt does everything in the background 🔥

Prerequisites

Before using Grunt, make sure you have:

  • Node.js installed
  • npm (Node Package Manager)
  • Magento 2 project setup
  • Access to terminal/command line

Step 1: Install Grunt CLI

Run the following command globally:

				
					npm install -g grunt-cli

Then verify:

				
					grunt --version

Step 2: Install Magento Grunt Dependencies

Go to your Magento root directory and run:

				
					npm install

This installs all required Grunt packages defined in Magento.

Step 3: Configure Grunt

Magento provides default Grunt configuration files:

  • Gruntfile.js
  • package.json

Now configure your theme inside:

				
					dev/tools/grunt/configs/themes.js

Example:

				
					module.exports = {
    customtheme: {
        area: 'frontend',
        name: 'Vendor/theme',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }
};

Step 4: Run Grunt Commands

▶️ Compile LESS to CSS
				
					grunt exec:yourtheme
grunt less:yourtheme

Watch File Changes (Most Useful)

				
					grunt watch

👉 This automatically detects changes and compiles files instantly — no manual work needed!

🧹 Clean & Deploy

				
					grunt clean
grunt exec

Key Grunt Tasks in Magento 2

Task Description
grunt exec Prepares static content
grunt less Compiles LESS files
grunt watch Watches file changes
grunt clean Clears generated files

Why Use Grunt in Magento 2?

Using Grunt gives you:

  • ✅ Faster frontend development
  • ✅ Automatic file compilation
  • ✅ Reduced manual errors
  • ✅ Cleaner workflow
  • ✅ Real-time updates

Common Issues & Fixes

Grunt not found

Install globally:

npm install -g grunt-cli

Changes not reflecting

Run:

grunt clean
grunt exec
grunt watch

Permission issues

Fix with:

chmod -R 777 var pub/static generated

Pro Tips

  • Always use grunt watch during development
  • Clear cache if styles don’t update
  • Use developer mode for best results

Conclusion

Grunt is an essential tool for any Magento frontend developer. By automating repetitive tasks, it helps you focus more on building features rather than managing files.

Final Thought

Whether you're customizing themes or building from scratch, integrating Grunt into your Magento 2 workflow is a game changer