The document provides an overview of Grunt, a JavaScript task runner built on Node.js, detailing its installation, configuration, and use with npm and various plugins. It highlights the need for a Gruntfile where tasks are defined and introduces essential dependency management via package.json. Additionally, the document touches on how Grunt can integrate with other tools and frameworks, along with resources for further learning.

1. Grunt all day!
…and some other stuff
Douglas Knudsen
Universal Mind

3. please remember to fill out the surveys

4. me
twitter: douglasknudsen
!
G+: douglasknudsen
!
email: douglasknudsen@gmail.com
!
blog: http://www.cubicleman.com
!
https://github.com/douglasknudsen

5. agenda
• why oh why
• enter Grunt!
• but first, some node
• and some npm
• onto grunt
• plugins galore

6. Karma!

7. why
we love for loops
but not when they involve us directly

8. why
along came ant
maven
xml config
make
nant

9. why
why not use JS?

10. why
enter grunt
configuration based on JS

11. what
grunt is a javascript task runner
workflow tool

12. what
based on nodejs

13. node
JS all up in your server!
evented I/O for the V8 JS engine
cylonjs, hummingbird, johnny-five, AWS,
machine_learning

14. node
var net = require('net');
!
var server = net.createServer(function (socket) {
socket.write('Echo serverrn');
socket.pipe(socket);
});
!
server.listen(1337, '127.0.0.1');

15. node
cross platform
grab your binaries
http://nodejs.org/

16. node
many libraries exist, crazy community fever
nearly 90k packages.
23m dls a day
https://www.npmjs.org/

17. node : npm
enter npm
node package manager
though its not really a acronym
comes with node

18. node : npm
use npm to install libraries
npm install lodash

19. node : npm
libraries can be installed globally
npm install -g yo
or locally
npm install lodash

20. node : npm
node_modules
package.json
npm install grunt-contrib-copy --save-dev

21. npm : package.json
{
"name": "david-tucker-site",
"version": "0.0.6",
"author": "David Tucker",
"description": "The Personal Blog of David Tucker at davidtucker.net",
"devDependencies": {
"browserify-shim": "~2.0.3",
"grunt-contrib-jshint": "~0.4.3",
"grunt-contrib-sass": "~0.3.0"
}
}
npm init

22. npm
add node_modules to .gitignore
you are using git are you not?
npm install

23. grunt
npm install -g grunt-cli
cd <yourProjectDir>
npm install grunt --save-dev

24. grunt
the grunt file
Gruntfile.js

25. grunt : gruntfile
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-concat');
};

26. grunt : gruntfile
wrapper
module.exports = function(grunt) {
grunt.initConfig({
config
pkg: grunt.file.readJSON('package.json')
});
};
read

27. grunt : gruntfile
cssmin: {
production: {
expand: true,
cwd: 'css',
src: ['*.css'],
dest: 'css'
},
dev: {
expand: false,
cwd: 'css',
src: ['*.css'],
dest: 'css'
}
}
task
target

28. grunt : gruntfile
grunt cssmin:dev

29. grunt : gruntfile
http://gruntjs.com/sample-gruntfile
npm install -g grunt-init
usage: grunt-init jquery

30. grunt
run multiple tasks sequentially
grunt.registerTask(‘workFlow’, [‘sass:dev’,’karma’,’copy’])

31. grunt : sass
compile sass to css using compass
grunt.loadNpmTasks('grunt-contrib-compass')
https://github.com/gruntjs/grunt-contrib-compass

32. grunt : cssmin
compass: {
dist: {
options: {
cssDir: ['<%= distdir %>/css'],
sassDir: ['src/styles'],
noLineComments: true,
importPath: ['bower_components/bootstrap-sass-official'],
force: true
}
},
dev: {
options: {
cssDir: ['<%= distdir %>/css'],
sassDir: ['src/styles'],
importPath: ['bower_components/bootstrap-sass-official']
}
}

33. grunt : jshint
validate your js with jshint
grunt.loadNpmTasks('grunt-contrib-jshint')
https://github.com/gruntjs/grunt-contrib-jshint

34. grunt : jshint
jshint:{
files:['gruntFile.js', '<%= src.js %>', '<%= src.jsTpl %>', '<%=
src.specs %>', '<%= src.scenarios %>'],
options:{
curly:true,
eqeqeq:true,
immed:true,
latedef:true,
newcap:true,
noarg:true,
sub:true,
boss:true,
eqnull:true,
globals:{}
}
}

35. grunt : watch
run tasks when watched file patterns are modified
grunt.loadNpmTasks('grunt-contrib-watch')
https://github.com/gruntjs/grunt-contrib-watch

36. grunt : watch
watch:{
options: {
livereload:true
},
js: {
files: ['<%= src.js %>'],
tasks: ['js', 'timestamp']
},
css: {
files: ['<%= src.sass %>'],
tasks: ['css', 'timestamp']
}

37. grunt : tl;dr
• install node
• npm install -g grunt-cli
• cd /../your/project../
• npm init
• npm install grunt --save-dev
• touch Gruntfile.js
• add tasks to Gruntfile.js
• grunt!

38. grunt : tl;dr
TWO important files:
package.json
Gruntfile.js

39. grunt : other
yes folks, you can make maven grunt
yes folks, you can make nuget grunt

40. grunt : yo
scaffolding!
opinionated scaffolding!

41. yo
npm install -g yo
npm install -g generator-webapp
yo webapp
grunt serve

42. yo : webapp
• html5 boilerplate
• twiiter bootstrap
• sass
• structure
• build
• jasmine
• karma
• phantomjs
• dependencies via bower
• …

43. yo : angular
npm install -g generator-angular
yo angular
yo angular:controller myController
yo angular:directive myDirective

44. yo
many many generators
• angular
• jhipster
• ember
• backbone
• meanstack
• karma
• symfony
• foundation

45. yo
result
structure
dependencies
tools

46. yo
don’t see one you need?
don’t like the way a generator works?
my team has a different way!
role your own!
http://yeoman.io/authoring/

47. gulp
gulp is on the horizon
still kind of new
code-over-configuration
http://gulpjs.com/

48. resources
• http://davidtucker.net/articles/automating-with-grunt
• https://www.npmjs.org/
• http://www.slideshare.net/RahulNanwani/integrating-grunt-
and-bower-with-maven
• https://www.npmjs.org/package/grunt-nuget
• http://yeoman.io/
• http://gruntjs.com/
• https://github.com/angular-app/angular-app
• http://joelhooks.com/
• http://cliffmeyers.com/
• http://livereload.com/
• https://egghead.io/technologies/grunt

49. ciao
thanks for dropping in!
be sure to fill out the survey