How to Use Grunt in Magento 2

In this tutorial, Today I will explain to how to use grunt in Magento 2. Grunt is a Contemporary JavaScript task runner. The purpose of Grunt is to simplify repetitive tasks by automating compilation, minification etc.

In Magento 2, Grunt will helpful for you to deploy your theme again and again on single changes in less file. Using grunt you can easily check change by the single command which is the main advantage of Grunt.

However, Main Question is that how to implement and use grunt in Magento 2. Let’s follow the steps for that :

Steps for How to Use Grunt in Magento 2 :

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 :

Copy Code


sudo apt-get update
sudo apt-get install nodejs

In addition, To check which version of Node.js you have installed after these initial steps, type in terminal :

Copy Code


nodejs -v

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 :

Copy Code


npm install -g grunt-cli

3) After that, Add Node.js dependency using below command. So, you need to execute command from Magento root directory :

Copy Code


npm install
npm update

4) 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 into grunt-config.json

Grunt Configuration :

5) After that, Open the grunt-config.json file and replace the below code :

Copy Code


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

6) 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 :

Copy Code


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 code that corresponds to the theme directory name.
<language>: 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.

7) In Last, You just need to execute commands :

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

That’s it !!!

I hope this blog is easy to understand how to get applied cart rule for quote in Magento 2.In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with a proper solution.

Stay Safe and Stay Connected !!

Post Views: 6,049