Grunt JS - Getting Started With Grunt


Published on

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.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Grunt JS - Getting Started With Grunt

  1. 1. Getting Started With Grunt by Doug Reynolds Wednesday, July 30, 14
  2. 2. Doug Reynolds Family | Senior Applications Developer | Gamer @_DougReynolds Wednesday, July 30, 14
  3. 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. 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. 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. 6. Installing Node Download the Binary For Your System Follow the installation instructions for your platform Wednesday, July 30, 14
  7. 7. I Want To Uninstall Node And Start Over If you are on Mac, using Terminal: lsbom -f -l -s -pf /var/db/receipts/ | 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: remove-node-js-from-windows Wednesday, July 30, 14
  8. 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 gruntfile.git ~/.grunt-init/gruntfile Wednesday, July 30, 14
  9. 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. 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: Wednesday, July 30, 14
  11. 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. 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. 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. 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. 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 automating-with-grunt Wednesday, July 30, 14