Introduction to grunt.js

1. Egor Miasnikov

2. Agenda
1. Why?
2. Setting up
3. Configuring tasks
4. Basic examples
2

3. Why?
Built on top of Node.js, Grunt is a task-based command-line tool that speeds
up workflows by reducing the effort required to prepare assets for
production. It does this by wrapping up jobs into tasks that are compiled
automatically as you go along. Basically, you can use Grunt on most tasks
that you consider to be grunt work and would normally have to manually
configure and run yourself.
Smashing Magazine
“
3

4. Setting up
1. Install Node.js
2. Install grunt cli tool npm install -g grunt-cli
3. Create package.json file
4. or npm install grunt
4

5. CREATING THE PACKAGE.JSON FILE
{
"name" : "SampleGrunt",
"version" : "0.1.0",
"author" : "Egor Miasnikov",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0"
}
01.
02.
03.
04.
05.
06.
07.
08.
5

6. USE THE PACKAGE.JSON FILE
You need install package npm install
6

7. CREATING THE GRUNTFILE.JS FILE
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
grunt.registerTask('default', []);
};
01.
02.
03.
04.
05.
06.
7

8. EXTENDING THE PACKAGE.JSON FILE
"devDependencies" : {
"grunt" : "~0.4.0"
"grunt-contrib-uglify" : "*"
}
}
01.
02.
03.
04.
05.
8

9. AFTER EACH PACKAGE.JSON UPDATE
You need start npm install in console
9

10. ADD RULES TO GRUNTFILE.JS
uglify: {
build: {
files: {
'build/js/base.min.js': ['assets/js/base.js']
}
}
}
01.
02.
03.
04.
05.
06.
07.
10