Welcome to episode 1, Grunt JS - Getting Started with Grunt. The purpose of this presentation/video is to give you an introduction to Grunt, provide a guide that will help reduce your ramp-up time in getting started, and show some of the benefits of task automation.

1. Getting Started With Grunt
by Doug Reynolds
Wednesday, July 30, 14

2. Doug Reynolds
Family | Senior Applications Developer | Gamer
www.linkedin.com/in/douglasreynolds/
@_DougReynolds
http://www.dougreynolds.me
https://plus.google.com/+DouglasReynolds_me
https://www.youtube.com/user/dougrdotnet/
Wednesday, July 30, 14

3. What is Grunt JS?
Grunt JS is a JavaScript task automation tool that
make life better
Allows us to work more efficiently with zero back-end
effort with a small front-end time investment.
Improves quality by automating tasks such as linting
and unit testing
Wednesday, July 30, 14

4. How Long Will It Take To
Get Setup?
In most cases, less than an hour to get completely
setup and running a test project
That includes installing dependencies such as
Node.JS
This presentation is pretty much a Mac tutorial, btw...
Wednesday, July 30, 14

5. Why Do I Need Node.JS?
Grunt has a dependency upon Node.js and is
managed through npm (Node Package Manager).
Grunt uses a plugin architecture so that you may
configure Grunt to run just the tasks you need for your
project. These plugins, or modules, are also installed
and managed through NPM.
Wednesday, July 30, 14

6. Installing Node
http://nodejs.org/download/
Download the Binary For Your
System
Follow the installation instructions for your platform
Wednesday, July 30, 14

7. I Want To Uninstall Node
And Start Over
If you are on Mac, using Terminal:
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom | while read
f; do sudo rm /usr/local/${f}; done
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/
db/receipts/org.nodejs.*
That will do it. Then just go to the node download site and get the
binary installer for your system and follow the installation instructions.
Windows? Assuming from within Add/Remove Programs but I don’t
have anything solid for you. This looked promising:
http://stackoverflow.com/questions/20711240/how-to-completely-
remove-node-js-from-windows
Wednesday, July 30, 14

8. Let’s Install Some Grunt
Install the Grunt CLI
sudo npm install -g grunt-cli
Install Grunt-Init
sudo npm install -g grunt-init
Clone a template (we’ll use the gruntfile template)
git clone https://github.com/gruntjs/grunt-init-
gruntfile.git ~/.grunt-init/gruntfile
Wednesday, July 30, 14

9. Scaffolding Your Project
Create your project directory if it doesn’t already exist
cd /path_to/myProject/
Create your projects package.json file
npm-init (answer some questions)
Create your projects gruntfile.js file
grunt-init gruntfile
Wow, My Project has 2 new files in it!
Wednesday, July 30, 14

10. What Was That About
Plugins?
At this point we want to begin customizing our
package.json to include the plugins we wish to use in our
project.
The general format is: npm install <module> --save-dev
We can install the plugins we need and have the
package.json file updated automatically for us.
Have a look at the plugins: https://github.com/gruntjs
Wednesday, July 30, 14

11. Sample Project Plugins
These are the plugins that will be installed into the sample
project.
grunt - The JavaScript task runner
grunt-contrib-jshint - Validates JavaScript
grunt-contrib-cssmin - Minifies css
grunt-contrib-watch - Runs predefined tasks upon
additions, changes, deletions
grunt-contrib-uglify - Minifies JS files using UglifyJS
grunt-contrib-less - Compiles LESS to CSS
Wednesday, July 30, 14

12. Install The Plugins
sudo npm install grunt-contrib-jshint --save-dev
sudo npm install grunt-contrib-cssmin --save-dev
sudo npm install grunt-contrib-watch --save-dev
sudo npm install grunt-contrib-uglify --save-dev
sudo npm install grunt-contrib-less --save-dev
Wednesday, July 30, 14

13. How Do I Run Grunt?
From your project root, enter this command: grunt
That is it, depending upon your configuration grunt runs
manually or by using plugins like grunt-contrib-watch,
grunt can be monitoring your project for changes and
do stuff automatically.
Wednesday, July 30, 14

14. Into The Editor
Modify the package.json file as needed
Configure the gruntfile.js file to automate your tasks
Wednesday, July 30, 14

15. Thank You!
Thank You for attending my presentation of Grunt JS -
Getting Started With Grunt!!
I hope you found this tutorial interesting and helpful.
This presentation, video, references/links, and transcripts
are available at http://dougreynolds.me/get-started-
automating-with-grunt
Wednesday, July 30, 14