How to setup Grunt in Magento2 – OX SoftwareS

Magento comes with pre-configured grunt tasks for compiling fewer 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.

Read More…

Contact Details:

OX SoftwareS Private Ltd. having 8+ years of experience in website development for companies. We are experts in digitization and develop e-commerce websites using Magento 2 to implement our e-commerce solutions. We love to design and develop e-commerce websites that help sell for our clients.

We implement custom-made solutions uniquely crafted to suit our customer requirements. Our perfect designs are compiled from the latest trends and industry research. We understand e-commerce deeply to provide solutions that work efficiently for our clients. We have worked with over 100+ projects and 50+ customers from across the globe. We are an e-commerce agency providing consultations and advanced engineering capabilities to our customers.

Address: No. 15, Ground Floor, A Block, Devapragasam Trade Centre, Poonamalle High Road, Maduravoyal, Chennai – 600 095, Tamilnadu, India.

Mobile Number: +918056293534

For more Information: https://www.oxsoftwares.com

Leave a Reply

Your email address will not be published. Required fields are marked *