How to setup Grunt In Magento2

Magento comes with pre-configured grunt tasks for compiling LESS files. Make sure that you set your Magento application to the developer or default mode. We have to follow the below steps to install and configure.

Install nodeJS

To do this, run the following command in a command prompt:

• $ sudo apt install curl
• $ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
• $ sudo apt install nodejs

Install Grunt CLI globally

To do this, run the following command in a command prompt:

• $ npm install -g grunt-cli

Create the files

Move to your Magento_root directory and type the following commands

• $ cp package.json.sample package.json
• $ cp Gruntfile.js.sample Gruntfile.js
• $ cp grunt-config.json.sample grunt-config.json

Install (or refresh) the node.js project dependency

• $ cd Magento_root
• $ npm install
• $ npm update

Grunt configuration file

Copy the contents of themes.js into local-themes.js in the dev/tools/grunt/configs/ directory.

• You can define your theme in the local-themes.js file
• Open grunt-config.json and change the content to the following

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

Configure your theme

Go to dev/tools/grunt/configs/local-themes.js. Under module.exports, paste the following json code to configure a theme. Replace the necessary lines.

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


Example

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

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 less : Compile CSS files using symlinks published in pub/static/frontend/

grunt exec:theme - To generate symlinks for a specific theme (grunt exec:default).
grunt less:theme - To use symlinks published for a specific theme.
grunt watch:theme - To track changes in source files, recompile .css files, and reload pages in a browser.

That’s it! Things should now be a bit more clear on how to install and configure Grunt in Magento2.

For more help contact us, we are one of the best Magento 2 development services providers globally.