>Grunt in Magento 2: How to install and configure

Grunt in Magento 2: How to install and configure

Before running Grunt to deploy theme in Magento 2, please note that JavaSript for server needs to be installed at first. There are five steps to do that and we have listed all them in the followings

Step 1: Use SSH navigating to the root of Magento 2 code folder

Step 2: Run yum -y install nodejs to set up Note JavaScript

Step 3: Run npm install to setup and update NPM. When it’s done, folder node_modules will be automatically created inside root folder of Magento 2

Step 4: Run npm install -g grunt-cli to install Grunt cli

Step 5: At dev/tools/grunt/configs/theme.js, insert the following code lines into curly brackets of module.exports = {.

theme_name>: {
area: 'frontend',
name: '/',
locale: en_US,
files: [
'<path_to_file1>', //path to root source file
'<path_to_file2>'
],
dsl: 'less'

In which:

  • <theme> is name of the theme
  • <path_to file> is link of the file less

After finishing all above steps, we change the code in file less and the code of app theme also. Then run commands below at root folder to convert the code into css code.

Grunt clean:<theme name>: this one is to delete entire code in the folders pub/static/frontent/<vendor>/<theme>/<locale> and Var/

Grunt exec:<theme name>: this command is used to render files into the form of symlinks

Grunt less:<theme name>: convert css files using symlinks pub/static/frontend/<Vendor>/<theme>/<locale>

Above is a general instruction of how to install and run Grunt in Magento 2. If any further detail in each step is needed, leave a comment or contact us and we will help you clear it out as soon as possible.

 

If you have any problems or need our professional service, please email us support@bsscommerce.com. You can also find the right solution in our best-in-class https://bsscommerce.com/magento-2-extensions.html

< Previous Post
Next Post >