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
Chandra Shekhar
Latest posts by Chandra Shekhar (see all)
- Best practices for micro service design - January 23, 2022
- Spring Boot - January 23, 2022
- Java - January 23, 2022
Recent Comments