Grunt training deck
0 likes10,492 views
This document introduces Grunt, an open source task automation tool built on Node.js that helps manage tasks like compiling code, running tests, building packages and more. It discusses how Grunt uses plugins to extend its functionality, manages dependencies, and allows automating and standardizing common development workflows through a Gruntfile and package.json. The document provides examples of popular Grunt plugins and demonstrates how to set up a sample Grunt project from scratch.
Grunt training deck
- 2. Introduction ➔ ➔ ➔ ➔ Grunt is a workflow / task automation tool. Built on top of Node.js. Primary focus is web development. Awesome range of plugins.
- 3. 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
- 4. 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.
- 5. Focus is on web development
- 6. Enough talk. Show me some magic.
- 7. Let’s see what we can do with Grunt: http://bit.ly/19A7Vq7
- 8. This is cool, and it’s flexible. We can make it work with PHP/.NET
- 9. How did we achieve that? Plugins.
- 11. 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
- 12. 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.
- 13. Time for another trick. ...installing a project from scratch.
- 14. 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
- 15. What is this magic? It’s package.json
- 16. 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
- 17. Enough talk. Show me how.
- 18. First up, let’s get started with Grunt 1. Install Node.js 2. From the command line, run: npm install grunt-cli -g
- 19. Running Grunt tasks ➔ Run a default task: grunt ➔ Run a specific task: grunt taskname ➔ Run a task config: grunt taskname:config