How to use GRUNT for Magento 2 and Pearl Theme [step by step Tutorial]

Grunt is a contemporary JavaScript task runner. The purpose of Grunt is to simplify repetitive tasks. You only have to configure a task runner through a Gruntfile. This tool can easily be utilized within all possible platforms and projects.

Although Magento 2 introduces built-in Grunt tasks, there are still several steps that have to be passed in order to set up Grunt for Magento 2 and the Pearl Theme.

First make sure that you set your Magento application to developer mode.

Note: You might need to run the installation commands below with root privileges, using sudo in front of each command. If the commands fail, please try rerunning them with sudo if needed.

Step 1:

Install Node JS on your PC. Here's a example:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

sudo apt-get install -y nodejs

For other Node JS versions check out this link: https://github.com/nodesource/distributions#debinstall

Step 2:

Install the Grunt CLI globally. To do this, run the following command in a command prompt:

npm install -g grunt-cli

Step 3:

Navigate to the root of your Magento Project and edit the names of the Grunt-related files as follows:

• package.json.sample to package.json
• Gruntfile.js.sample to Gruntfile.js
• grunt-config.json.sample into grunt-config.json

Step 4:

Install (or refresh) the node.js project dependency, including Grunt, for your Magento instance. To do this, run the following commands in a command prompt, from the root of the Magento project:

npm install

npm update

Step 5:

Check to make sure Grunt is installed correctly. If it is, running the following command should return your installed version:

grunt --version

Step 6:

Open thegrunt-config.json file, and replace the following:

{

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

}

with:

{

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

}

Step 7:

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

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

For example, to add the Pearl Child Theme, open the dev/tools/grunt/configs/themes.js file and add pearl as follows:

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

Step 8: 

Start working with Grunt on customizing the Pearl Theme. To start, you can run the following Grunt commands. You can run them all in one line as exemplified here:

If you have the Pearl Theme configured, run the following:

grunt clean:pearl && grunt exec:pearl && grunt less:pearl && grunt watch:pearl

If you have the deafult Magento 2 Luma theme configured, run the following:

grunt clean:luma && grunt exec:luma && grunt less:luma && grunt watch:luma

Step 9 (Optional): 

If you want to use Grunt for “watching” changes automatically, without reloading pages in a browser each time, you can install the LiveReload Chrome Extension in your browser and start it by clicking the extension icon after Grunt watching is enabled.

You can find more details about what each Grunt command does below. Make sure you run the commands from your Magento installation directory.

If you have LiveReload installed, run the grunt watch command, and the flow is simple:

• After you customize the content of any .less file, changes are applied and the page should reload automatically. No additional action should be required.
• After you customize the root source files or move the files included to the root files, run the grunt clean and grunt exec commands, and the page should reload in the browser.

To stop the Grunt watcher, you can use CTRL+C, which closes the process on Linux environments.