SlideShare une entreprise Scribd logo
1  sur  15
Télécharger pour lire hors ligne
#Howto cook good JavaScript code w/
Grunt.JS
Andrii Lundiak

LANDIKE @ gmail.com
Twitter: @landike
2014
What?
Grunt.JS
JavaScript task runner
- laziness => opportunity;
- “build” automation;
- save your time;
- make project maintainable;
- Node.JS family Author: @cowboy aka Ben Alman
Agenda
❖ Short review of grunt contrib modules.
❖ Live usage examples.
❖ What next?
❖ Resources
❖ Q/A
Dependency mng.
❖ matchdep, load-grunt-tasks.
Min-Ugly-Beauty
❖ grunt-contrib-concat, grunt-contrib-uglify,
❖ grunt-contrib-cssmin,
❖ grunt-contrib-htmlmin, grunt-contrib-imagemin,
❖ grunt-ngmin
Preprocessors
❖ grunt-contrib-less,
❖ Ruby: grunt-contrib-sass or grunt-contrib-compass
❖ C: node-sass + node-sass-middleware (for connect)

or grunt-sass (including node-sass) by @SindreSourus
❖ @SindreSorus: “Check out grunt-contrib-sass if you prefer something more stable, but slower.”
Static Analysis (code validation)
❖ grunt-jslint, grunt-contrib-jshint,
❖ grunt-contrib-jsonlint,
❖ grunt-contrib-csslint, grunt-lesslint
❖ grunt-eslint (not eslint-grunt ),
❖ grunt-mdlint,
❖ grunt-plato.
Shell/Files oriented
❖ grunt-contrib-copy, grunt-sync, grunt-contrib-watch,
❖ grunt-clean, grunt-remove-logging, grunt-search,
❖ grunt-exec, grunt-shell, grunt-env, grunt-path,
❖ grunt-ssh,
❖ grunt-prompt,
❖ grunt-bower-task,
❖ grunt-concurrent,
❖ rimraf.
Release oriented
❖ grunt-bump,
❖ grunt-readme => grunt-verb
❖ grunt-changelog, grunt-conventianal-changelog,
❖ grunt-inject, grunt-sails-linker,
❖ grunt-rev.
Server(s)
❖ grunt-contrib-connect, or express ,
❖ connect-livereload,
❖ nodemon + grunt-nodemon, forever (outdated),
❖ grunt-concurrent.
#TODO
❖ grunt-newer
❖ grunt-browserify,
❖ grunt-contrib-coffee,
❖ grunt-sails-linker,
❖ grunt-gh-pages
❖ grunt-autoprefixer
❖ grunt-manifest
js.next()? => gulp.js
❖ Grunt vs Gulp



+: Gulp uses node streams to group tasks 

together and process them sequentially in memory)



+/-: Grunt’s tasks are configured in a configuration object 

inside the gruntfile while Gulp’s are coded using 

a Node style syntax



-/+: 779 vs. 3,638.



- : gulp error messaging.

Resources
❖ Grunt.JS: Getting started
❖ Automating your JS with Grunt
❖ Grunt.JS add-on for Chrome
❖ Read: Build wars [grunt vs. gulp]
❖ Grunt-Delicious Project code =>
❖ https://bitbucket.org/alundiak/grunt-delicious/
– Mungara Tarou Krishnamurti
“Because answers exists
only to questions.”
@landike says:

Contenu connexe

Tendances

Cloud App Develop
Cloud App DevelopCloud App Develop
Cloud App Develop
Fin Chen
 
Integrating grunt and bower with maven
Integrating grunt and bower with mavenIntegrating grunt and bower with maven
Integrating grunt and bower with maven
Rahul Nanwani
 
Introduction to NodeJS
Introduction to NodeJSIntroduction to NodeJS
Introduction to NodeJS
Zahid Mahir
 

Tendances (20)

WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
 
Pre-render Blazor WebAssembly on static web hosting at publishing time
Pre-render Blazor WebAssembly on static web hosting at publishing timePre-render Blazor WebAssembly on static web hosting at publishing time
Pre-render Blazor WebAssembly on static web hosting at publishing time
 
MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013
 
Charles Anim
Charles AnimCharles Anim
Charles Anim
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Why NodeJS
Why NodeJSWhy NodeJS
Why NodeJS
 
Cloud App Develop
Cloud App DevelopCloud App Develop
Cloud App Develop
 
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
 
Firebase and AngularJS
Firebase and AngularJSFirebase and AngularJS
Firebase and AngularJS
 
When Will Drupal Die? (Keynote talk)
When Will Drupal Die? (Keynote talk)When Will Drupal Die? (Keynote talk)
When Will Drupal Die? (Keynote talk)
 
Automate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.jsAutomate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.js
 
Integrating grunt and bower with maven
Integrating grunt and bower with mavenIntegrating grunt and bower with maven
Integrating grunt and bower with maven
 
Hybrid Application Development
Hybrid Application DevelopmentHybrid Application Development
Hybrid Application Development
 
Grunt training deck
Grunt training deckGrunt training deck
Grunt training deck
 
Scripting with NodeJS
Scripting with NodeJSScripting with NodeJS
Scripting with NodeJS
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého Schizma
 
Introduction to NodeJS
Introduction to NodeJSIntroduction to NodeJS
Introduction to NodeJS
 
Windows azure and linux
Windows azure and linuxWindows azure and linux
Windows azure and linux
 
Finjs - Angular 2 better faster stronger
Finjs - Angular 2 better faster strongerFinjs - Angular 2 better faster stronger
Finjs - Angular 2 better faster stronger
 
S&T What I know about Node 110817
S&T What I know about Node 110817S&T What I know about Node 110817
S&T What I know about Node 110817
 

Similaire à Grunt Delicious

Quest for the Perfect Workflow for McrFRED
Quest for the Perfect Workflow for McrFREDQuest for the Perfect Workflow for McrFRED
Quest for the Perfect Workflow for McrFRED
Andi Smith
 
Thinking after that disaster in cloud
Thinking after that disaster in cloudThinking after that disaster in cloud
Thinking after that disaster in cloud
Amazon Web Services
 

Similaire à Grunt Delicious (20)

フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
 
WordPress automation and CI
WordPress automation and CIWordPress automation and CI
WordPress automation and CI
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
Lightning fast sass
Lightning fast sassLightning fast sass
Lightning fast sass
 
Riereta Node.js session 3 (with notes)
Riereta Node.js session 3 (with notes)Riereta Node.js session 3 (with notes)
Riereta Node.js session 3 (with notes)
 
Building your own personal minion with grunt.js
Building your own personal minion with grunt.jsBuilding your own personal minion with grunt.js
Building your own personal minion with grunt.js
 
Copass + Ruby on Rails = <3 - From Simplicity to Complexity
Copass + Ruby on Rails = <3 - From Simplicity to ComplexityCopass + Ruby on Rails = <3 - From Simplicity to Complexity
Copass + Ruby on Rails = <3 - From Simplicity to Complexity
 
MongoDB, Cloudformation and Chef
MongoDB, Cloudformation and ChefMongoDB, Cloudformation and Chef
MongoDB, Cloudformation and Chef
 
Quest for the Perfect Workflow for McrFRED
Quest for the Perfect Workflow for McrFREDQuest for the Perfect Workflow for McrFRED
Quest for the Perfect Workflow for McrFRED
 
Single Page JavaScript WebApps... A Gradle Story
Single Page JavaScript WebApps... A Gradle StorySingle Page JavaScript WebApps... A Gradle Story
Single Page JavaScript WebApps... A Gradle Story
 
PaddlePaddle: A Complete Enterprise Solution
PaddlePaddle: A Complete Enterprise SolutionPaddlePaddle: A Complete Enterprise Solution
PaddlePaddle: A Complete Enterprise Solution
 
Grunt All Day
Grunt All DayGrunt All Day
Grunt All Day
 
Thinking after that disaster in cloud
Thinking after that disaster in cloudThinking after that disaster in cloud
Thinking after that disaster in cloud
 
Gradle: The Build System you have been waiting for!
Gradle: The Build System you have been waiting for!Gradle: The Build System you have been waiting for!
Gradle: The Build System you have been waiting for!
 
Gulp.js & webpack
Gulp.js & webpackGulp.js & webpack
Gulp.js & webpack
 
Deploy Nodejs on Docker
Deploy Nodejs on DockerDeploy Nodejs on Docker
Deploy Nodejs on Docker
 
Grunt js and WordPress
Grunt js and WordPressGrunt js and WordPress
Grunt js and WordPress
 
Grunt & Front-end Workflow
Grunt & Front-end WorkflowGrunt & Front-end Workflow
Grunt & Front-end Workflow
 
Web Development: Making it the right way
Web Development: Making it the right wayWeb Development: Making it the right way
Web Development: Making it the right way
 
Modern Static Site with GatsbyJS
Modern Static Site with GatsbyJSModern Static Site with GatsbyJS
Modern Static Site with GatsbyJS
 

Plus de Andrii Lundiak

Plus de Andrii Lundiak (8)

React JS & Functional Programming Principles
React JS & Functional Programming PrinciplesReact JS & Functional Programming Principles
React JS & Functional Programming Principles
 
Create ReactJS Component & publish as npm package
Create ReactJS Component & publish as npm packageCreate ReactJS Component & publish as npm package
Create ReactJS Component & publish as npm package
 
Node js packages [#howto with npm]
Node js packages [#howto with npm]Node js packages [#howto with npm]
Node js packages [#howto with npm]
 
Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]
 
Mockups & Requirements [ITdeya @ IF_IT_S]
Mockups & Requirements [ITdeya @ IF_IT_S]Mockups & Requirements [ITdeya @ IF_IT_S]
Mockups & Requirements [ITdeya @ IF_IT_S]
 
Drupal Vs Other
Drupal Vs OtherDrupal Vs Other
Drupal Vs Other
 
Drupal Deployment Troubles and Problems
Drupal Deployment Troubles and ProblemsDrupal Deployment Troubles and Problems
Drupal Deployment Troubles and Problems
 
Election
ElectionElection
Election
 

Dernier

Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
masabamasaba
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
masabamasaba
 

Dernier (20)

VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
 
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
 
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
 
tonesoftg
tonesoftgtonesoftg
tonesoftg
 
WSO2Con2024 - Hello Choreo Presentation - Kanchana
WSO2Con2024 - Hello Choreo Presentation - KanchanaWSO2Con2024 - Hello Choreo Presentation - Kanchana
WSO2Con2024 - Hello Choreo Presentation - Kanchana
 
%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
 
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
 
WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...
WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...
WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...
 
WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
 

Grunt Delicious

  • 1. #Howto cook good JavaScript code w/ Grunt.JS Andrii Lundiak
 LANDIKE @ gmail.com Twitter: @landike 2014
  • 2. What? Grunt.JS JavaScript task runner - laziness => opportunity; - “build” automation; - save your time; - make project maintainable; - Node.JS family Author: @cowboy aka Ben Alman
  • 3. Agenda ❖ Short review of grunt contrib modules. ❖ Live usage examples. ❖ What next? ❖ Resources ❖ Q/A
  • 4. Dependency mng. ❖ matchdep, load-grunt-tasks.
  • 5. Min-Ugly-Beauty ❖ grunt-contrib-concat, grunt-contrib-uglify, ❖ grunt-contrib-cssmin, ❖ grunt-contrib-htmlmin, grunt-contrib-imagemin, ❖ grunt-ngmin
  • 6. Preprocessors ❖ grunt-contrib-less, ❖ Ruby: grunt-contrib-sass or grunt-contrib-compass ❖ C: node-sass + node-sass-middleware (for connect)
 or grunt-sass (including node-sass) by @SindreSourus ❖ @SindreSorus: “Check out grunt-contrib-sass if you prefer something more stable, but slower.”
  • 7. Static Analysis (code validation) ❖ grunt-jslint, grunt-contrib-jshint, ❖ grunt-contrib-jsonlint, ❖ grunt-contrib-csslint, grunt-lesslint ❖ grunt-eslint (not eslint-grunt ), ❖ grunt-mdlint, ❖ grunt-plato.
  • 8. Shell/Files oriented ❖ grunt-contrib-copy, grunt-sync, grunt-contrib-watch, ❖ grunt-clean, grunt-remove-logging, grunt-search, ❖ grunt-exec, grunt-shell, grunt-env, grunt-path, ❖ grunt-ssh, ❖ grunt-prompt, ❖ grunt-bower-task, ❖ grunt-concurrent, ❖ rimraf.
  • 9. Release oriented ❖ grunt-bump, ❖ grunt-readme => grunt-verb ❖ grunt-changelog, grunt-conventianal-changelog, ❖ grunt-inject, grunt-sails-linker, ❖ grunt-rev.
  • 10. Server(s) ❖ grunt-contrib-connect, or express , ❖ connect-livereload, ❖ nodemon + grunt-nodemon, forever (outdated), ❖ grunt-concurrent.
  • 11. #TODO ❖ grunt-newer ❖ grunt-browserify, ❖ grunt-contrib-coffee, ❖ grunt-sails-linker, ❖ grunt-gh-pages ❖ grunt-autoprefixer ❖ grunt-manifest
  • 12. js.next()? => gulp.js ❖ Grunt vs Gulp
 
 +: Gulp uses node streams to group tasks 
 together and process them sequentially in memory)
 
 +/-: Grunt’s tasks are configured in a configuration object 
 inside the gruntfile while Gulp’s are coded using 
 a Node style syntax
 
 -/+: 779 vs. 3,638.
 
 - : gulp error messaging.

  • 13. Resources ❖ Grunt.JS: Getting started ❖ Automating your JS with Grunt ❖ Grunt.JS add-on for Chrome ❖ Read: Build wars [grunt vs. gulp] ❖ Grunt-Delicious Project code => ❖ https://bitbucket.org/alundiak/grunt-delicious/
  • 14. – Mungara Tarou Krishnamurti “Because answers exists only to questions.”