Grunt For Magento 2

Hello Everyone, welcome to my blog. Today, I am going to discuss about the Grunt tool. We all know that during our development process or while making any customization to our modules we need to make a lot of changes and wait to reflect those changes on the frontend. We need to wait for a while to let our compilation process to complete successfully. But, what if, if we make any change to our file and it instantly reflects on our frontend. Yes, today I am going to discuss the same automated process which will help us to check our changes almost instantly.

What is Grunt?

Grunt is basically a task runner tool that helps to automate any compilation process. Grunt supports tasks like saas, jade, less, and many more. 

Magento has a preconfigured configuration grunt file to compile less files so that we can automate less compilation process. 

Installing and configuring Grunt

Grunt is a node package and to install Grunt we need to install node JS in our system. So, node JS is a prerequisite for the Grunt tool. Follow the below steps to install Grunt in your system. 

1. curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
2. sudo apt-get install -y node JS
3. Follow the above steps to install node JS, I am using a Linux system so I have shared those steps to install node JS. But, if you are using Windows or Mac use this link to install node JS in your system.
4. npm install -g grunt-cli
5. Navigate to your Magento root directory using your Terminal/command prompt

Note: If you are using a Windows system don’t forget to add node JS path to your system variable

6. cp package.json.sample package.json (From your Magento root)
7. cp Gruntfile.js.sample Gruntfile.js
8. cp grunt-config.json.sample grunt-config.json
9. npm install
10. npm update
11. Now navigate to dev/tools/grunt/configs/
12. cp themes.js local-themes.js
13. nano local-themes.js

If Grunt is installed successfully using the above steps then the Grunt will use the default configuration files located in the dev/tools/grunt/configs/ directory. We can define our local theme configuration in local-themes.js

Local-themes.js Configuration

'use strict';

module.exports = {
   blank: {
       area: 'frontend',
       name: 'Magento/blank',
       locale: 'en_US',
       files: [
           'css/styles-m',
           'css/styles-l',
           'css/email',
           'css/email-inline'
       ],
       dsl: 'less'
   },
   luma: {
       area: 'frontend',
       name: 'Magento/luma',
       locale: 'en_US',
       files: [
           'css/styles-m',
           'css/styles-l'
       ],
       dsl: 'less'
   },
   backend: {
       area: 'adminhtml',
       name: 'Magento/backend',
       locale: 'en_US',
       files: [
           'css/styles-old',
           'css/styles'
       ],
       dsl: 'less'
   }
};

In the above configuration, we have set the configuration for three themes luma, blank, and backend. We have used different nodes to set parameters for the Grunt runner.

1. Area: area node is used to set the area code of our theme it can be either frontend or backend(this can be set as frontend or backend if though you are using your custom theme).
2. Name: name node is used to set the name of our theme further it will be treated as Vendorname_packagename or in our case Magento_backend, Magento_luma, or Magento_blank.
3. Locale: locale node is used to set the language code for example en_US, en_GB, etc. But, for one configuration we can only set one local code. To set another local we need to declare the same theme configuration with another locale code. 

luma: {
       area: 'frontend',
       name: 'Magento/luma',
       locale: 'en_US',
       files: [
           'css/styles-m',
           'css/styles-l'
       ],
       dsl: 'less'
   },
luma: {
       area: 'frontend',
       name: 'Magento/luma',
       locale: 'en_GB',
       files: [
           'css/styles-m',
           'css/styles-l'
       ],
       dsl: 'less'
   },

4. Files: files node is used to set path of our source file

Once all the configuration is set we are good to go with the task runner tool to listen or changes, to do the same execute the following command from your terminal or from your command prompt. 

1. Navigate to Magento root directory
2. grunt exec:luma <change your theme name here>
3. grunt watch:luma

Now, let’s make changes to our body class, to change HTML body color, edit _color.less file from lib/web/css/source/lib/variables/_colors.less and @color-white: #000; @color-white: #FFF; you will let the following output.

Changes can be seen instantly without refreshing the page, for that we need to install a live reload extension. But, that is beyond the scope of this blog. 

Please let me know your thoughts about this post down in the comment section below, or, you can write me an email on my email Id admin@asolutions.co.in. Till then stay home stay safe. Happy coding 🙂

[post-views]