Hire Us

Using Grunt in Magento 2

FacebookTwitterGoogleLinkedIn


rasbor_using_grunnt_in_magento2

In this blog we will understand the basics of Grunt and understand some tricks through which we can use Grunt in Magento 2 and bring out the most effective and useful outlay for an ecommerce store. Grunt is very common and useful tool to be used with Magento 2, knowing more about it will help you know your site more and take better decisions.

What is Grunt?

Grunt is a new JavaScript based task runner that essentially simplifies any repetitive tasks by automating compilation, linting, minification, and unit testing, etc. This task runner can do all the routine process mentioned above with zero effort. All you have to do is configure the task runner through a Gruntfile. The tool is a versatile tool as it can be utilized for all possible platforms and projects.

The Grunt eco system is quite huge and it is growing every day. Several plugins are already available so that using the task runner becomes easy on a Magento enabled site. Furthermore, if you cannot find what you need, you can always create your own Grunt plugin.  Magento 2 offers continuous integration with Grunt.js.

Installing and Configuring Grunt in Magento 2

Magento 2 has some built in Grunt tasks, which makes life for a developer quite easy, but there are still several steps that you have to perform before using them. First, you need to install Node.js. Next, it is important to install Grunt CLI tool globally and in your Magento 2 directory.

Grunt 1

Grunt 2

After this work on the node.js project dependency for your Magento 2 instance: you have to refresh it.

Grunt 3

In the next step add your theme to Grunt configuration. In the dev/tools/grunt/configs/theme.js file, add it to module.exports. Here is an example,

Grunt 4

Pointers to Remember

  • <theme> is the theme code that must correspond to the theme directory name.
  • <language> is the specified in the ‘code_subtag’ format.
  • <path_to_file> is a path to root the source file. If your theme do not include its root source files and gets them from a certain theme, specify the files of the parent theme.

Useful Magento 2 Grunt Commands

To perform different customization tasks in Magento 2 project, use the following Grunt commands. A word of advice, run these commands should always be run from the installation directory of Magento 2.

  • grunt clean:<theme>. This command removes static files related to your theme in both pub/static and var directories.
  • grunt less:<theme> should be used to compile .css files using symlinks from the directory.
  • grunt exec:<theme>. This one republishes source files symlinks to pub/static/frontend/<Vendor>/<theme>/<locale>.

How to Track Changes in Magento 2 Using Grunt

To debug Magento 2 styles by using Grunt tasks, examine the following cases.

  • Run the exec task after switching the compilation mode from client-side to server-side.
  • Run less command after customizing the less file content. Reload the page. Remember the root source files are the only exception.
  • Once root source is customized, it is necessary to run the exec task and reload the page.

Conclusion

Grunt is a very useful tool for Magento 2 and due to its compatibility with Magento it has become one of the most used and preferred task runners. Using Grunt can reduce the work load and improve performance of your Magento 2 enabled site. Try Grunt in your site and experience the results.

Tagged: ,

Using Grunt in Magento 2