In today’s world Front-end Engineering is moving in an entirely new generation of web applications. Apps are becoming complex with richer UI and better interactions. But with it comes the ever increasing size of UI resources and their management.
Managing UI resources effectively is posing as a major challenge to the Front-end world.
Grunt is our preferred tool for UI task automation. It’s a task runner, offering a lot of bundled plugins for common tasks.
The best comes when you can combine various tasks together to create your own more powerful bundle.
Following are some usual tasks we do:
-
Minification
-
Merging
-
Compilation
-
Linting
By including Grunt in our projects all of the above tasks are now just single command away.
http://gruntjs.com/ This site has all the information about how to make a local grunt setup.
Dependencies
-
node.js
-
grunt-plugins
-
Gruntfile
-
package.json
Task Automated
|
Plugin Used
|
Compressing Javascript and CSS files
|
grunt-yui-compressor
|
Merging JS modules into single file
|
grunt–concat
|
Compile Sass to CSS using Compass
|
grunt-contrib-compass
|
Validate files with JSHint
|
grunt-contrib-jshint
|
Run predefined tasks whenever watched file patterns are added, changed or deleted.
|
grunt-contrib-watch
|
Minify images
|
grunt-contrib-imagemin
|
Clean files and folders
|
grunt-contrib-clean
|
Project creation with required folder structure.
|
grunt-shell
|
List of Tasks automated at Naukri.com using grunt plugins
Simple example of how we automated creating new folder with desired structure [Gruntfile.js]
module.exports = function(grunt) {
//Loads task folder into memory
grunt.file.expand(‘../node_modules/grunt-*/tasks’).forEach(grunt.loadTasks);
// Configuration for grunt command
grunt.mergeConfig({
shell: {
multiple: {
command: [ ‘mkdir <new-folder>’, ‘cd <new-folder>’].join(‘&&’)
}
}
});
//Register command
grunt.registerTask(‘new-branch’, [‘shell’]);
}
Related Posts
Posted in General