Embed Size (px)
DESCRIPTION
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.
Citation preview
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
