Building Your Own

Personal Minion

With Grunt.js

Brent Swisher

Hello!

Brent Swisher

Web Developer at Grand

Valley State University

You can find me at:

@brentswisher

swisherb@gvsu.edu

Hello Again!

Harold

Minion at Grand Valley

State University

Likes:

Clean Code

Smooth Jazz

Dislikes:

Shirts

Leprechauns

What is grunt.js?

It will be okay, the command

line isn’t scary (this time)

RUN!!!

Installing Grunt.js

Harold: The Early Years

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

package.jsonManage Dependencies

package.json

package.json

package.json

Quotations are commonly printed

as a means of inspiration and to

invoke philosophical thoughts

from the reader.

▪ Now we just need to add the

packages we are using.

▪ npm install [package] --save-dev

Installing local task plugins

Quotations are commonly printed

as a means of inspiration and to

invoke philosophical thoughts

from the reader.

npm install grunt --save-dev

Quotations are commonly printed

as a means of inspiration and to

invoke philosophical thoughts

from the reader.

npm install grunt --save-dev

Gruntfile.jsUsed to configure and load

grunt plugins

Gruntfile.js

Gruntfile.js

Gruntfile.js

Gruntfile.js

Gruntfile.js

Gruntfile.js

Gruntfile.js

Harold goes to work

What can grunt do?

Available Plugins

http://gruntjs.com/plugins

5,347

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

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

Javascript minification and

obfuscation

Can also be used to combine

multiple files

grunt-contrib-uglify

CSS minification

Can also be used to combine

multiple files

grunt-contrib-cssmin

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)

Demo Time

Harold takes a trip

Reusing your grunt setup

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

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

Thanks!ANY QUESTIONS?

You can find me at:

@brentswisher

swisherb@gvsu.edu