{"id":346171,"date":"2022-07-29T08:19:30","date_gmt":"2022-07-29T08:19:30","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=346171"},"modified":"2024-11-12T05:34:24","modified_gmt":"2024-11-12T05:34:24","slug":"understanding-magento-theme-use-grunt-js-for-better-development-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/understanding-magento-theme-use-grunt-js-for-better-development-in-magento-2\/","title":{"rendered":"Understanding Magento Theme: Use grunt js for better development in Magento 2"},"content":{"rendered":"\n

Hello friends! Today, we’ll go over how to use Magento built-in Grunt commands and learn how to add custom configurations to make development faster. <\/p>\n\n\n\n

This guide is especially useful if you’re working with a Magento development company<\/a>, as it can help streamline and speed up your development process.<\/p>\n\n\n\n

Overview<\/h2>\n\n\n\n

You can use Grunt to automate any tasks you need, but out of the box Magento comes with pre-configured grunt tasks for compiling LESS files.<\/p>\n\n\n\n

Prerequisites<\/h2>\n\n\n\n

There are only two major requirements. First of all,\u00a0you have to\u00a0set<\/a>\u00a0your Magento 2 to the developer or default\u00a0mode<\/a>. <\/p>\n\n\n\n

Note that with the default mode, you set the Less compilation mode to Server-side Less compilation, which is required for our final goal.<\/p>\n\n\n\n

<\/a>Installing and configuring Grunt<\/h2>\n\n\n\n

Magento has built-in Grunt tasks configured, but there are still several steps you need to take to be able to use it:<\/p>\n\n\n\n

Install node.js<\/a> to any location on your machine.<\/p>\n\n\n\n

Install Grunt CLI tool globally. To do this, run the following command in a command prompt<\/p>\n\n\n\n

npm install -g grunt-cli<\/pre>\n\n\n\n
If you get an error that permission is denied, you’ll need to run the command as sudo<\/code> or on Windows, you’ll need to run PowerShell or Command Prompt as an administrator.<\/p>\n\n\n\n
\"rahul\"
Installation of grunt-cli<\/figcaption><\/figure>\n\n\n\n
Go to the <Magento_root><\/code> directory, copy and paste the contents of the following files:<\/p>\n\n\n\n
    \n
  1. package.json.sample<\/code>\u00a0into\u00a0package.json<\/code><\/li>\n\n\n\n
  2. Gruntfile.js.sample<\/code>\u00a0into\u00a0Gruntfile.js<\/code><\/li>\n\n\n\n
  3. grunt-config.json.sample<\/code>\u00a0into\u00a0grunt-config.json<\/code><\/li>\n<\/ol>\n\n\n\n
    Install (or refresh) the node.js<\/code> project dependency, including Grunt, for your Magento instance. To do this, run the following commands in a command prompt:<\/p>\n\n\n\n
    cd your_Magento_instance_directory<\/pre>\n\n\n\n
    npm install<\/pre>\n\n\n\n
    npm update<\/pre>\n\n\n\n
    There is also an optional step related to Grunt for \u201cwatching\u201d changes automatically, without reloading pages in a browser each time. <\/p>\n\n\n\n
    To implement this feature, you have to install the\u00a0LiveReload extension<\/a>.<\/p>\n\n\n\n
    Adding themes to Grunt configuration<\/h2>\n\n\n\n
    Add your Custom Theme to Grunt Configuration open this file, in the dev\/tools\/grunt\/configs\/themes.js<\/code> and add your theme to module.exports<\/em> like shown below:<\/p>\n\n\n\n
    module.exports = {\n\n     <theme>: {\n         area: '<area>',\n         name: '<Vendor>\/<theme>',\n         locale: '<language>',\n         files: [\n             '<path_to_file1>', \/\/path to root source file\n             '<path_to_file2>'\n         ],\n         dsl: 'less'\n     },<\/pre>\n\n\n\n
    Where the following notation is used:<\/p>\n\n\n\n