GRUNT - The JavaScript Task Runner

1. GRUNT - THE JAVASCRIPT TASK
RUNNER
Larry Nung

2. AGENDA
Introduction
Requirement
Install CLI
How to use
Gruntfile
Hello Grunt
grunt-contrib-imagemin
Reference
Q & A
2

3. INTRODUCTION

4. INTRODUCTION

5. REQUIREMENT

6. REQUIREMENT
 Node.js
 0.8.0 +

7. INSTALL CLI

8. INSTALL CLI
 npm install grunt-cli -g

9. HOW TO USE

10. HOW TO USE
Setup project
folder
Init
package.json
Init
Gruntfile.js
Install grunt
package
Install grunt
plug-in
Setup task
Run task

11. HOW TO USE
 Setup project folder
 md <folder>
 Init package.json
 npm init
 Init Gruntfile.js
 type NUL > Gruntfile.js
 Install grunt package
 npm install grunt --save-dev
 Install grunt plug-in
 npm install <plug-in> --save-dev
 Setup task
 notepad gruntfile.js
 Run task
 grunt

12. GRUNTFILE

13. GRUNTFILE
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};

14. GRUNTFILE
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
Config Task & Target
Load npm package
Register task

15. GRUNTFILE
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
Task
Target

16. OPTIONS
 Target options > Task options > Default options

17. FILES
 Compact Format
 Files Object Format
 Files Array Format

18. COMPACT FORMAT
grunt.initConfig({
jshint: {
foo: {
src: ['src/aa.js', 'src/aaa.js']
},
},
concat: {
bar: {
src: ['src/bb.js', 'src/bbb.js'],
dest: 'dest/b.js'
},
},
});

19. FILES OBJECT FORMAT
grunt.initConfig({
concat: {
foo: {
files: {
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
},
},
bar: {
files: {
'dest/b.js': ['src/bb.js', 'src/bbb.js'],
'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
},
},
},
});

20. FILES OBJECT FORMAT
grunt.initConfig({
concat: {
foo: {
files: {
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
},
},
bar: {
files: {
'dest/b.js': ['src/bb.js', 'src/bbb.js'],
'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
},
},
},
});
SourceDestination

21. FILES ARRAY FORMAT
grunt.initConfig({
concat: {
foo: {
files: [
{src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
{src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
],
},
bar: {
files: [
{src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
{src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
],
},
},
});

22. HELLO GRUNT

23. HELLO GRUNT
var grunt = require('grunt');
grunt.registerTask('default', '',function(){
console.log('hello world');
});

24. HELLO GRUNT
var grunt = require('grunt');
grunt.registerTask('world', '', function(){
console.log('hello world');
});
grunt.registerTask('hello', '', function(name){
if(!name || !name.length)
grunt.warn('you need to provide a name.');
console.log('hello ' + name);
});
grunt.registerTask('default', ['world', 'hello:adrian']);

25. HELLO GRUNT

26. GRUNT-CONTRIB-IMAGEMIN

27. GRUNT-CONTRIB-IMAGEMIN
 npm install grunt-contrib-imagemin --save-dev

28. GRUNT-CONTRIB-IMAGEMIN
var grunt = require('grunt');
grunt.initConfig({
imagemin: {
main:{
options: {
optimizationLevel: 3,
svgoPlugins: [{ removeViewBox: false }]
},
files: [{
expand: true,
cwd: 'Images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'Images/’
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

29. GRUNT-CONTRIB-IMAGEMIN

30. REFERENCE
30

31. REFERENCE
 Grunt: The JavaScript Task Runner
 http://gruntjs.com/

32. Q&A
32

33. QUESTION & ANSWER
33