SlideShare uma empresa Scribd logo
1 de 14
JavaScript Task Runners
Gulp & Grunt
Lohith G N
About Me …
Microsoft MVP (Visual Studio & Development)
Technical Evangelist
@kashyapa
http://www.kashyapas.com
http://about.me/kashyapa
Lohith G N
Agenda
• Web Development Tasks
• What is a Task Runner
• Why Task Runner
• Gulp
• Grunt
WEB DEVELOPMENT TASKS
What tasks do you perform for deployment ?
Deployment Tasks
• Compile SASS to CSS
• Compile LESS to CSS
• Concatenating JavaScript
• Minifying JavaScript
• Testing your code (JavaScript)
• Linting your code (JavaScript)
• …
BUILD SYSTEMS OR TASK RUNNERS
What are they ?
Build Systems
• Collection of Tasks
• Automate Repetitive Work
• Also called Task Runners
Modern Front End Workflow
Package
Managers
Preprocessors
Task Runners &
Build Tools
Modern Front End Workflow
Package
Managers
Bower NPM
Preprocessors CSS (SASS, LESS) JavaScript HTML
Task Runners
& Build Tools Gulp Grunt
GULP
Streaming Build System
http://gulpjs.com
GRUNT
Configuration over Code
http://gruntjs.com
CONFIDENTIAL
Thank You !
Lohith.Nagaraj@Telerik.com

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Gulp - The Streaming Build System
Gulp - The Streaming Build SystemGulp - The Streaming Build System
Gulp - The Streaming Build System
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.js
 
GulpJs - An Introduction
GulpJs - An IntroductionGulpJs - An Introduction
GulpJs - An Introduction
 
Gulp - the streaming build system
Gulp - the streaming build systemGulp - the streaming build system
Gulp - the streaming build system
 
JavaScript code academy - introduction
JavaScript code academy - introductionJavaScript code academy - introduction
JavaScript code academy - introduction
 
Devenez le plus heureux des Front-end avec Gulp.js
Devenez le plus heureux des Front-end avec Gulp.jsDevenez le plus heureux des Front-end avec Gulp.js
Devenez le plus heureux des Front-end avec Gulp.js
 
Getting started with gulpjs
Getting started with gulpjsGetting started with gulpjs
Getting started with gulpjs
 
gulp
gulpgulp
gulp
 
Production Ready Javascript With Grunt
Production Ready Javascript With GruntProduction Ready Javascript With Grunt
Production Ready Javascript With Grunt
 
Introduction to GulpJs
Introduction to GulpJsIntroduction to GulpJs
Introduction to GulpJs
 
TDC2016SP - Esqueça Grunt ou Gulp. Webpack and NPM rule them all!
TDC2016SP -  Esqueça Grunt ou Gulp. Webpack and NPM rule them all!TDC2016SP -  Esqueça Grunt ou Gulp. Webpack and NPM rule them all!
TDC2016SP - Esqueça Grunt ou Gulp. Webpack and NPM rule them all!
 
Introduction to using Grunt & Bower with WordPress theme development
Introduction to using Grunt & Bower with WordPress theme developmentIntroduction to using Grunt & Bower with WordPress theme development
Introduction to using Grunt & Bower with WordPress theme development
 
Web development tools { starter pack }
Web development tools { starter pack }Web development tools { starter pack }
Web development tools { starter pack }
 
Toolbox of a Ruby Team
Toolbox of a Ruby TeamToolbox of a Ruby Team
Toolbox of a Ruby Team
 
Webpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ StepsWebpack & React Performance in 16+ Steps
Webpack & React Performance in 16+ Steps
 
Using the Command Line: Bash and WP-CLI
Using the Command Line: Bash and WP-CLIUsing the Command Line: Bash and WP-CLI
Using the Command Line: Bash and WP-CLI
 
Preprocessor Workflow with Grunt
Preprocessor Workflow with GruntPreprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
 
Develop - Project Scaffolding
Develop - Project ScaffoldingDevelop - Project Scaffolding
Develop - Project Scaffolding
 
Forget Grunt and Gulp! Webpack and NPM rule them all!
Forget Grunt and Gulp! Webpack and NPM rule them all!Forget Grunt and Gulp! Webpack and NPM rule them all!
Forget Grunt and Gulp! Webpack and NPM rule them all!
 
Modernizing Your WordPress Workflow with Grunt & Bower
Modernizing Your WordPress Workflow with Grunt & BowerModernizing Your WordPress Workflow with Grunt & Bower
Modernizing Your WordPress Workflow with Grunt & Bower
 

Semelhante a JavaScript Task Runners - Gulp & Grunt

Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb
Dave Bouwman
 

Semelhante a JavaScript Task Runners - Gulp & Grunt (20)

ALM Tour 2013 - Entregar a tiempo y sin errores
ALM Tour 2013 - Entregar a tiempo y sin erroresALM Tour 2013 - Entregar a tiempo y sin errores
ALM Tour 2013 - Entregar a tiempo y sin errores
 
Improve your web dev workflow in Visual Studio
Improve your web dev workflow in Visual StudioImprove your web dev workflow in Visual Studio
Improve your web dev workflow in Visual Studio
 
Js Automation. npm scripts & Gulp
Js Automation. npm scripts & GulpJs Automation. npm scripts & Gulp
Js Automation. npm scripts & Gulp
 
Release Management with Visual Studio Team Services and Office Dev PnP
Release Management with Visual Studio Team Services and Office Dev PnPRelease Management with Visual Studio Team Services and Office Dev PnP
Release Management with Visual Studio Team Services and Office Dev PnP
 
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
 
DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISE
DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISEDEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISE
DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISE
 
Free Online SharePoint Framework Webinar
Free Online SharePoint Framework WebinarFree Online SharePoint Framework Webinar
Free Online SharePoint Framework Webinar
 
North east user group tour
North east user group tourNorth east user group tour
North east user group tour
 
Tackling performance in the WordPress ecosystem at scale
Tackling performance in the WordPress ecosystem at scaleTackling performance in the WordPress ecosystem at scale
Tackling performance in the WordPress ecosystem at scale
 
WordPress automation and CI
WordPress automation and CIWordPress automation and CI
WordPress automation and CI
 
Web development - Developing Web as A Team
Web development -  Developing Web as A TeamWeb development -  Developing Web as A Team
Web development - Developing Web as A Team
 
Ship It ! with Ruby/ Rails Ecosystem
Ship It ! with Ruby/ Rails EcosystemShip It ! with Ruby/ Rails Ecosystem
Ship It ! with Ruby/ Rails Ecosystem
 
Branding office 365 with front end tooling
Branding office 365 with front end toolingBranding office 365 with front end tooling
Branding office 365 with front end tooling
 
State of PrintCSS - MarkupUK 2023.pdf
State of PrintCSS - MarkupUK 2023.pdfState of PrintCSS - MarkupUK 2023.pdf
State of PrintCSS - MarkupUK 2023.pdf
 
Server Add-ons for Front-end Developers
Server Add-ons for Front-end DevelopersServer Add-ons for Front-end Developers
Server Add-ons for Front-end Developers
 
CRM Saturday: DevOps with Jonas Rapp
CRM Saturday: DevOps with Jonas RappCRM Saturday: DevOps with Jonas Rapp
CRM Saturday: DevOps with Jonas Rapp
 
Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]
 
The MEAN Stack
The MEAN StackThe MEAN Stack
The MEAN Stack
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb
 

Mais de Lohith Goudagere Nagaraj

Mais de Lohith Goudagere Nagaraj (20)

Porting Hybrid Apps to Native Apps
Porting Hybrid Apps to Native AppsPorting Hybrid Apps to Native Apps
Porting Hybrid Apps to Native Apps
 
Hybrid Mobile App Development With Cordova
Hybrid Mobile App Development With CordovaHybrid Mobile App Development With Cordova
Hybrid Mobile App Development With Cordova
 
Building Web Apps & APIs With Node JS
Building Web Apps & APIs With Node JSBuilding Web Apps & APIs With Node JS
Building Web Apps & APIs With Node JS
 
Even Quicker Development with Xamarin Forms Using Telerik UI for Xamarin
Even Quicker Development with Xamarin Forms Using Telerik UI for XamarinEven Quicker Development with Xamarin Forms Using Telerik UI for Xamarin
Even Quicker Development with Xamarin Forms Using Telerik UI for Xamarin
 
You Know Angular 2, You Know Native Mobile App Development
You Know Angular 2, You Know Native Mobile App DevelopmentYou Know Angular 2, You Know Native Mobile App Development
You Know Angular 2, You Know Native Mobile App Development
 
Connecting your .Net Applications to NoSQL Databases - MongoDB & Cassandra
Connecting your .Net Applications to NoSQL Databases - MongoDB & CassandraConnecting your .Net Applications to NoSQL Databases - MongoDB & Cassandra
Connecting your .Net Applications to NoSQL Databases - MongoDB & Cassandra
 
Angular JS 2.0 & React with Kendo UI
Angular JS 2.0 & React with Kendo UIAngular JS 2.0 & React with Kendo UI
Angular JS 2.0 & React with Kendo UI
 
Kendo UI Wrappers in ASP.NET Core
Kendo UI Wrappers in ASP.NET CoreKendo UI Wrappers in ASP.NET Core
Kendo UI Wrappers in ASP.NET Core
 
Seamless Access to Data from BI Tools using DataDirect Cloud
Seamless Access to Data from BI Tools using DataDirect CloudSeamless Access to Data from BI Tools using DataDirect Cloud
Seamless Access to Data from BI Tools using DataDirect Cloud
 
The Bleeding Edge - Whats New in Angular 2
The Bleeding Edge - Whats New in Angular 2The Bleeding Edge - Whats New in Angular 2
The Bleeding Edge - Whats New in Angular 2
 
Introduction to UWP - Universal Windows Platform Application Development
Introduction to UWP - Universal Windows Platform Application DevelopmentIntroduction to UWP - Universal Windows Platform Application Development
Introduction to UWP - Universal Windows Platform Application Development
 
Cross Platform Web Applications Using ASP.NET Core 1.0
Cross Platform Web Applications Using ASP.NET Core 1.0Cross Platform Web Applications Using ASP.NET Core 1.0
Cross Platform Web Applications Using ASP.NET Core 1.0
 
Build Leaner, Faster Web Applications with ASP.NET
Build Leaner, Faster Web Applications with  ASP.NETBuild Leaner, Faster Web Applications with  ASP.NET
Build Leaner, Faster Web Applications with ASP.NET
 
Visual Studio 2015 - Whats New ?
Visual Studio 2015 - Whats New ?Visual Studio 2015 - Whats New ?
Visual Studio 2015 - Whats New ?
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
Online Spreadsheet for your Web Applications using Kendo UI
Online Spreadsheet for your Web Applications using Kendo UIOnline Spreadsheet for your Web Applications using Kendo UI
Online Spreadsheet for your Web Applications using Kendo UI
 
NativeScript + Push Notifications
NativeScript + Push NotificationsNativeScript + Push Notifications
NativeScript + Push Notifications
 
10 Useful New Features of ECMA Script 6
10 Useful New Features of ECMA Script 610 Useful New Features of ECMA Script 6
10 Useful New Features of ECMA Script 6
 
New Enterprisre Capabilities in Telerik Platform
New Enterprisre Capabilities in Telerik PlatformNew Enterprisre Capabilities in Telerik Platform
New Enterprisre Capabilities in Telerik Platform
 
Creating Custom HTML Helpers in ASP.NET MVC
Creating Custom HTML Helpers in ASP.NET MVCCreating Custom HTML Helpers in ASP.NET MVC
Creating Custom HTML Helpers in ASP.NET MVC
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Último (20)

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 

JavaScript Task Runners - Gulp & Grunt