Grunt JS - Getting Started With Grunt

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

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/

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

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...

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
conﬁgure Grunt to run just the tasks you need for your
project. These plugins, or modules, are also installed
and managed through NPM.

Installing Node
http://nodejs.org/download/
Download the Binary For Your
System
Follow the installation instructions for your platform

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://stackoverﬂow.com/questions/20711240/how-to-completely-
remove-node-js-from-windows

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

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!

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 ﬁle updated automatically for us.
Have a look at the plugins: https://github.com/gruntjs

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

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

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

Into The Editor
Modify the package.json file as needed
Configure the gruntfile.js file to automate your tasks

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

Grunt JS - Getting Started With Grunt

More Related Content

What's hot

Viewers also liked

Similar to Grunt JS - Getting Started With Grunt

Recently uploaded

Grunt JS - Getting Started With Grunt