How to use grunt in Magento 2?

How to use grunt in Magento 2?

In this article, you will be learning about how we can use grunt in Magento

Before starting the installation, Please rename the existing files package.json.sample and Gruntfile.js.sample in your root folder as package.json and Gruntfile.js respectively.

Follow the below steps to use grunt in Magento 2:

  • Step 1: Install Node.js
  • Step 2: Install Grunt CLI
  • Step 3: Install Node.js dependencies
  • Step 4: Add a theme to Grunt configuration
  • Step 5: Run Grunt commands

Step 1: Install Node.js

First, we need to install a stable version of Node.js.

Step 2: Install Grunt CLI

Now install the Grunt CLI tool globally by the following command:

		npm install -g grunt-cli

Step 3: Install Node.js dependencies

nstall the node.js project dependencies, including Grunt, for your Magento instance. To do this, run the following commands in the command prompt:

		cd <your_Magento_instance_directory> npm install npm update

Step 4: Add a theme to Grunt configuration

Add your theme to Grunt configuration. To do this, in the  dev/tools/grunt/configs/themes.js file, add your theme in  module.exports as shown below: 

		
                            module.exports = {
                                ...
                                <theme>: {
                                area: 'frontend',
                                    name: '<Vendor>/<theme>',
                                    locale: '<language>',
                                    files: [
                                    '<path_to_file1>', //path to root source file
                                    '<path_to_file2>'
                                ],
                                    dsl: 'less'
                                    ...
                                },
                            }

Where the following notations are used:

<theme>: Your theme code, conventionally should correspond to the theme directory name.
<language>: specified in the ‘code_subtag’ format, for example, en_US. Only one locale can be specified here. To debug the theme with another locale, create one more theme declaration, having specified another value for language.
<path_to_file >: the path to the root source file, relative to the directory  app/design/frontend/<Vendor>/<theme/>/web. You need to specify all root source files of the theme. If your theme inherits from a certain theme and does not contain its root source files, specify the root source files of the parent theme.

Step 5: Run Grunt commands

Now the installation process is completed, the next step is to run the Grunt commands:

grunt clean: This command removes static files related to your theme in both  pub/static and  var directories.

grunt exec: This one republishes source files symlinks to
pub/static/frontend/<Vendor>/<theme>/<locale>

grunt less: This command compiles all the css file using the symlinks in this location
pub/static/frontend/<Vendor>/<theme>/<locale>

grunt watch: This command is used to start the grunt tool to track the changes done in the main files like  .less and re-compiles into CSS files.

Every time you change any of this in the source file, grunt watch will show notification in the terminal about the specific change and recompiles the changes simultaneously.

Cheers!