How to Use Grunt in Magento 2

Grunt is a modern JavaScript task runner designed to automate repetitive tasks like compilation, minification, and more. In Magento 2, Grunt can significantly streamline the process of theme development and make it easier to manage workflow.

Installing and Configuring Grunt:

1. Install node.js to any location on your machine.
2. Open your terminal.
3. Install the Grunt CLI tool globally. To do this, run the following command in a command prompt:
   Copy Code Copied Use a different Browser

   
   npm install -g grunt-cli
   
   

4. Next, navigate to your Magento 2 web root. (The directory where Magento 2 is installed) and rename the below files:
   package.json.sample into package.json
Gruntfile.js.sample into Gruntfile.js
grunt-config.json.sample into grunt-config.json
5. Go to the your magento root directory
   Copy Code Copied Use a different Browser

   
   cd /path/to/magento2
   
   

6.  Run below command
   Copy Code Copied Use a different Browser

   
   npm install
   npm update
   
   

7.  Once all the packages are installed in the project, ensure your Magento 2 installation is in dev mode.
   Copy Code Copied Use a different Browser

   
   bin/magento deploy:mode:set development
   
   

Configuration file

1. Open the grunt-config.json file and replace the below code :
   Copy Code Copied Use a different Browser

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

2. Go to the dev/tools/grunt/configs/ and add the below code in themes.js file.
   Copy Code Copied Use a different Browser

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

   <theme_name>: Your theme directory name.
   <language>: specified in the code_subtag format, for example en_US.
   <path_to_file >: the path to the root source file, relative to the directory app/design/frontend/<Vendor>/<theme>/web.

3. Once all changes are done run the below commands in your Magento root to check your changes.
   
   Run grunt exec:<theme> : Copies source files to the pub/static directory.
   Run grunt less:<theme> : Compiles .less files into CSS.
   Run grunt watch:<theme> : This command monitors changes in your .less files and recompiles them in real time.

Why Use Grunt?

Grunt is particularly useful for developers working on Magento 2 themes. When making frequent changes to .less files, Grunt ensures that you can redeploy your theme effortlessly. The ability to see changes instantly with just one command is one of the key advantages of using Grunt.

Key Benefits of Using Grunt in Magento 2

• Automation: Grunt automates tasks like file compilation and deployment, eliminating repetitive manual processes and speeding up development.
• Simplified Deployment: Deploy theme changes quickly and efficiently without manual intervention.
• Real-Time Compilation: With the grunt watch command, you can instantly see changes to your .less files as they are compiled into CSS, saving you time and ensuring consistency. Integrating Grunt into your Magento 2 development process helps streamline your workflow, reduce errors, and improve the overall development experience. By using Grunt’s powerful automation features, you can focus more on building great themes and less on repetitive tasks.

Ready to Streamline Your Magento 2 Development? 

At Evrig, we understand the challenges of theme development and workflow management. By integrating Grunt into your Magento 2 process, you can automate repetitive tasks and focus on what truly matters – creating amazing e-commerce experiences.

Need Help with Grunt Setup?

Our team at Evrig specializes in Magento 2 development and can guide you through seamless Grunt integration, ensuring your theme development is faster, more efficient and hassle-free.

📞 Contact us today to enhance your workflow and take your Magento 2 projects to the next level!