Grunt JS - Getting Started With Grunt

Getting Started With Gruntby Doug Reynolds

Wednesday, July 30, 14

Doug Reynolds

Family | Senior Applications Developer | Gamerwww.linkedin.com/in/douglasreynolds/

@_DougReynoldshttp://www.dougreynolds.mehttps://plus.google.com/+DouglasReynolds_mehttps://www.youtube.com/user/dougrdotnet/

Wednesday, July 30, 14

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

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

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

Installing Node

http://nodejs.org/download/

Download the Binary For YourSystem

Follow the installation instructions for your platform

Wednesday, July 30, 14

I Want To Uninstall Node And Start OverIf 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

Let’s Install Some GruntInstall 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

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

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

Sample Project PluginsThese 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 CSSWednesday, July 30, 14

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

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

Into The Editor

Modify the package.json file as needed

Configure the gruntfile.js file to automate your tasks

Wednesday, July 30, 14

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