This document discusses JavaScript task runners Gulp and Grunt. It describes common web development tasks like compiling Sass/Less to CSS, concatenating and minifying JavaScript files. Task runners automate repetitive tasks and are also called build systems. Gulp is a streaming build system while Grunt uses configuration over code. Both are useful for modern front-end workflows involving preprocessors, package managers, and building/optimizing assets.

1. JavaScript Task Runners
Gulp & Grunt
Lohith G N

2. About Me …
Microsoft MVP (Visual Studio & Development)
Technical Evangelist
@kashyapa
http://www.kashyapas.com
http://about.me/kashyapa
Lohith G N

3. Agenda
• Web Development Tasks
• What is a Task Runner
• Why Task Runner
• Gulp
• Grunt

4. WEB DEVELOPMENT TASKS
What tasks do you perform for deployment ?

5. Deployment Tasks
• Compile SASS to CSS
• Compile LESS to CSS
• Concatenating JavaScript
• Minifying JavaScript
• Testing your code (JavaScript)
• Linting your code (JavaScript)
• …

6. BUILD SYSTEMS OR TASK RUNNERS
What are they ?

7. Build Systems
• Collection of Tasks
• Automate Repetitive Work
• Also called Task Runners

8. Modern Front End Workflow
Package
Managers
Preprocessors
Task Runners &
Build Tools

9. Modern Front End Workflow
Package
Managers
Bower NPM
Preprocessors CSS (SASS, LESS) JavaScript HTML
Task Runners
& Build Tools Gulp Grunt

10. GULP
Streaming Build System

11. http://gulpjs.com

12. GRUNT

13. Configuration over Code
http://gruntjs.com

14. CONFIDENTIAL
Thank You !
Lohith.Nagaraj@Telerik.com