Grunt training deck

10,277 views

Published on

A brief talk introducing Grunt as a task management option for the development team.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
10,277
On SlideShare
0
From Embeds
0
Number of Embeds
1,751
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Grunt training deck

  1. 1. Introduction ➔ ➔ ➔ ➔ Grunt is a workflow / task automation tool. Built on top of Node.js. Primary focus is web development. Awesome range of plugins.
  2. 2. A workflow / task automation tool Build automation is the act of scripting or automating a wide variety of tasks that software developers do in their day-to-day activities including things like: ● compiling computer source code into binary code ● packaging binary code ● running tests ● deployment to production systems ● creating documentation and/or release notes
  3. 3. Built on top of It’s better than… ● Shell scripts / Batch files ● ANT ● Rake ➔ It’s written in JavaScript, and we all know that. ➔ It’s modular, and manages its own dependencies in a clean, source-control friendly way.
  4. 4. Focus is on web development
  5. 5. Enough talk. Show me some magic.
  6. 6. Let’s see what we can do with Grunt: http://bit.ly/19A7Vq7
  7. 7. This is cool, and it’s flexible. We can make it work with PHP/.NET
  8. 8. How did we achieve that? Plugins.
  9. 9. Plugins grunt-contrib-watch Watch filesystem for changes grunt-file-creator Create arbitrary files grunt-contrib-connect Start a simple web server grunt-text-replace Replace text in files grunt-open Launch a browser grunt-git-describe Get tags from Git grunt-contrib-concat Concatenate files grunt-contrib-copy Copy files grunt-contrib-sass Compile SASS files grunt-contrib-compress Create Zip/Tar/Gz files grunt-contrib-clean Empty a directory grunt-connect-rewrite Symlinks for web server assemble Generate a static website from templates grunt-karma Karma testing grunt-imageoptim Optimize images grunt-plato JS Static code analysis grunt-aws-s3 Upload/Download from AWS S3
  10. 10. Grunt does two really useful things. ➔ It ties your plugins together and runs them in a specific order. ➔ It normalises (to a certain extent) the format in which you supply options to the plugins. As an added bonus… ➔ Grunt + NPM helps manage build dependencies.
  11. 11. Time for another trick. ...installing a project from scratch.
  12. 12. Starting from scratch* ➔ Fresh directory / machine ➔ Node.js & Grunt Cli installed (but nothing more) ➔ ➔ ➔ ➔ git clone https://github.com/psyked/grunt-example-project cd grunt-example-project npm install grunt
  13. 13. What is this magic? It’s package.json
  14. 14. Introducing package.json ➔ It’s a standard part of Node.js ➔ It describes your project, including its dependencies. ➔ It gets auto-updated as you ‘install’ additional plugins for your project. ➔ Create one using npm init ➔ Auto-add dependencies by installing them with the -save-dev flag
  15. 15. Enough talk. Show me how.
  16. 16. First up, let’s get started with Grunt 1. Install Node.js 2. From the command line, run: npm install grunt-cli -g
  17. 17. Running Grunt tasks ➔ Run a default task: grunt ➔ Run a specific task: grunt taskname ➔ Run a task config: grunt taskname:config

×