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

Related posts:

The following two tabs change content below.

Chandra Shekhar

Consultant at Infogain
Chandra Shekhar is a LAMP Developer,Thinker,Blogger and currently working as Magento(Ecommerce) specialist.. I am always open to learn new things in LAMP as well as other newer technology. In the journey of my last 9 years of web and product development, I have decided to share my knowledge and experience to Open Source Community in 2011. In this regard I have started CuteHits.com. Since then I am actively sharing my knowledge on various LAMP technology through CuteHits.com’s technical ... Read More about Chandra Shekhar