Grunt
The JavaScript task runner
Typical uses for a task runner
- Minifying HTML/CSS/JS files
- Code validation
- Transpiling (transforming code written in another language to JS)
- Running tests
Task runner?
- Task runners automate repetitive development tasks
Grunt?
- Grunt is a Javascript task runner
- Grunt is built and configured using Javascript, so it fits smoothly in JS development flows
- Grunt is a good option for a task runner because of its large ecosystem of plugins (~3400 plugins)
Installing grunt
- Installing Grunt is easily done using npm
- Grunt installation consists of two parts
npm install -g grunt-cli
Grunt-CLI
Grunt-CLI allows you to run Grunt commmand in your command line
npm install grunt --save-dev
Grunt
Grunt is installed locally instead of globally (like Grunt-CLI)
Configuring grunt
- Configuration of Grunt is done through Gruntfile
- Gruntfile is Javascript, so configuring it is very simple
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
};
Empty gruntfile
Complete gruntfile
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('test', ['jshint']);
grunt.registerTask('default', ['jshint']);
};
Commonly used grunt plugins
- grunt-contrib-uglify, minify files
- grunt-contrib-jshint, automate your code validation
- grunt-contrib-watch, watch files and run grunt automatically when specific criteria is matched
- ..and many more at http://gruntjs.com/plugins
Plugins
- Grunt itself does not "do" anything
- All grunt tasks are separated into plugins
- Plugins are installed through npm
npm install grunt-contrib-watch --save-dev
Gruntjs
By Oscar Lemström
Gruntjs
- 1,186