Using grunt with Magento 2

Why grunt plays an important role in Magento 2

Magento 2 is a well standard platform which is technically rich. Grunt is one of the most popular tool for frontend development. It can run multiple tasks in one go. For example, You would like to do below works before you send site to staging/production

  • All the css/js should be minified (developers will work on non-minified version)
  • Deploy static content
  • Clear cache
  • Create black list of IPs for which you don’t want to allow site access
  • ………………..could be many more.

Grunt is a task runner that can run multiple tasks on one go with one command in fact. So LESS compilation is very easy with grunt.

How to install grunt for Magento 2

Magento 2 is itself configured with grunt (make sure you are using latest magento ie., 2.2 and above at least). Below are the steps to install grunt for magento 2

  • Go to command line and change directory to document root of the application
  • Rename below files
    • grunt-config.json.sample to grunt-config.json
    • js.sample to Gruntfile.js
    • json.sample to package.json
    • Copy dev/tools/grunt/configs/themes.js to dev/tools/grunt/configs/local-themes.js (this is configured under grunt-config.json)

 

  • run the below command “npm install .” (Make sure node is installed on your machine)
  • Now your grunt is installed..

How to see all the tasks configured for grunt

Just use the command “grunt –help”

How to run any task using grunt

Run the command “grunt –Your-taskname—” you can see task name using above command.

How to register a new task using grunt

Note: To make any customization its not recommended to make any changes into core files. So instead of make changes into core files you should add  a new task.

Step 1: Add a new file dev\tools\grunt\tasks\your-task-name.js

Step 2: Add below code

/**

* Copyright © 2018 Magento. All rights reserved.

* See COPYING.txt for license details.

*/

module.exports = function (grunt) {

'use strict';

 

var fs      = require('fs'),

log     = grunt.log.write,

ok      = grunt.log.ok,

error   = grunt.log.error;

 

grunt.registerTask(' your-task-name', function () {

log('My custom task is done!');

});

 

};

Step 3: Create another task which will run your new task (or even you can add multiple task into it). Add below code under dev\tools\grunt\tasks\devtask.js

/**
 * Copyright © 2018 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
module.exports = function (grunt) {
  'use strict';

  var fs = require('fs'),
      _  = require('underscore');

  grunt.registerTask('devtask', function () {
    var tasks = [
      'your-task-name'
    ];
    grunt.task.run(tasks);
  });

};

Step 4: run the command grun devtask

The following two tabs change content below.

Chandra Shekhar

GCP Architect
Chandra Shekhar Pandey is Google certified Cloud engineer, I am Magento2 Trained developer. Having huge experience in designing cloud solution. I have around 12 years of experience with world enterprise IT companies and fortune 500 clients. During my architecture design I am always caring about high availability, fast performance and resilient system. From the programmer background I have huge experience in LAMP stack as well. Throughout my carrier I have worked on Retail, E-Learning, Video Conferencing and social media domain. The motive of creating cutehits was just to share the knowledge/solutions I get to know during my day to day life so that if possible I can help someone for same problems/solutions. CuteHits.com is a really a very effort for sharing knowledge to rest of the world. For any query/suggestion about same you can contact me on below details:- Email: shekharmca2005 at gmail.com Phone: +91-9560201363

Latest posts by Chandra Shekhar (see all)

You may also like...