Everybody secretly wants to be an evil genius, right? So, what do they all have in common? Minions. In this session, you will learn to build your own little development minion with the grunt.js automation framework. Learn the basics of what grunt is, how it works, and how to make it automate the boring programming tasks that waste your time. Be warned, there will be code involved, and perhaps a little world domination.

1. Building Your Own
Personal Minion
With Grunt.js
Brent Swisher

2. Hello!
Brent Swisher
Web Developer at Grand
Valley State University
You can find me at:
@brentswisher
swisherb@gvsu.edu

3. Hello Again!
Harold
Minion at Grand Valley
State University
Likes:
Clean Code
Smooth Jazz
Dislikes:
Shirts
Leprechauns

4. What is grunt.js?

5. It will be okay, the command
line isn’t scary (this time)
RUN!!!

6. Installing Grunt.js
Harold: The Early Years

7. Installation & Setup
▪ Installing Node.js
▫ https://nodejs.org/en/download/
▪ Installing Grunt
▫ npm install -g grunt-cli
▪ Setting up a project
▫ package.json
▫ Gruntfile.js

8. package.json
Manage Dependencies

9. package.json

10. package.json

11. package.json

12. Quotations are commonly printed
as a means of inspiration and to
invoke philosophical thoughts
from the reader.

13. ▪ Now we just need to add the
packages we are using.
▪ npm install [package] --save-dev
Installing local task plugins

14. Quotations are commonly printed
as a means of inspiration and to
invoke philosophical thoughts
from the reader.
npm install grunt --save-dev

15. Quotations are commonly printed
as a means of inspiration and to
invoke philosophical thoughts
from the reader.
npm install grunt --save-dev

16. Gruntfile.js
Used to configure and load
grunt plugins

17. Gruntfile.js

18. Gruntfile.js

19. Gruntfile.js

20. Gruntfile.js

21. Gruntfile.js

22. Gruntfile.js

23. Gruntfile.js

24. Harold goes to work
What can grunt do?

25. Available Plugins
http://gruntjs.com/plugins
5,347

26. Watches files for changes, and
calls other grunt tasks when they
change.
Live Reload! - My personal favorite
use of grunt.js
Available as a chrome extension
grunt-contrib-watch

27. jshint allows your “minion” to
automatically test your javascript
for common errors or bugs.
For example, it can be set to throw
an error if you declare unused
variables
grunt-contrib-jshint

28. Javascript minification and
obfuscation
Can also be used to combine
multiple files
grunt-contrib-uglify

29. CSS minification
Can also be used to combine
multiple files
grunt-contrib-cssmin

30. grunt-contrib-sass
Sass integration for grunt, allows
you to centralize your build
process
(There are also plugins for most
other pre-processors - less,
stylus, etc)

31. Demo Time

32. Harold takes a trip
Reusing your grunt setup

33. 1. Copy the package.json and
Gruntfile.js to the new project
2. Run npm install
3. If necessary, update file paths
Two files and a command
Quick Note: You will want to exclude the node_modules
folder from git/version control

34. RESOURCES:
▪ https://github.com/brentswisher/gruntminion - The files
created during the talk
▪ gruntjs.com - Official grunt hompage
▪ http://gruntjs.com/plugins - list of available plugins
▪ https://nodejs.org/download/ - Node.js Installer
TUTORIALS:
▪ http://24ways.org/2013/grunt-is-not-weird-and-hard/
▪ http://www.html5rocks.
com/en/tutorials/tooling/supercharging-your-gruntfile/
CREDITS:
▪ “Harold” by Jake Rohdy
▪ Busy Icons by Olly Holovchenko
▪ Presentation template by SlidesCarnival

35. Thanks!
ANY QUESTIONS?
You can find me at:
@brentswisher
swisherb@gvsu.edu