Home >Magento 2 Grunt: How to install and configure

Magento 2 Grunt: How to install and configure

Before running Magento 2 Grunt to deploy theme, 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 Magento 2 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 Magento 2 Grunt. If any further detail in each step is needed, leave a comment or contact us and we will help you clear out this Magento 2 Grunt installation as soon as possible.

BSS Commerce is one of the leading Magento extension providers and web development services in the world. With experienced and certified Magento developers, we commit to bring high-quality products and services to optimize our business effectively.

CONTACT NOW to let us know your problems. We are willing to support you every time.

< Previous Post
Next Post >
+ posts