Automação de tarefas com Grunt

A U T O M A Ç Ã O D E TA R E FA S C O M O

GRUNT

# M K T M E E T U P

H U G O B E S S A

H U G O B E S S A

D E S E N V O LV E D O R F R O N T- E N DE N T U S I A S TA D E O T I M I Z A Ç Ã O

M U N D O O P E N S O U R C E

O C O N T E Ú D O

O C O N T E Ú D O

O D E S E N V O LV E D O R F R O N T- E N D

O G R U N TA M U D A N Ç A N A M K T

A M U D A N Ç A N O M U N D O

A O T I M I Z A Ç Ã O

A PA R T E P R ÁT I C AA S U A V E Z

O D E S E N V O LV E D O R

F R O N T- E N D


O “ M O N TA D O R ”

O C A R A Q U E D E I X A O S I T E B O N I T I N H OO C A R A Q U E FA Z A Q U E L E S S C R I P T Z I N H O S L Á


N Ã ON Ã ON Ã O


O C A R A D A P E R F O R M A N C E

O C A R A Q U E C R I A E X P E R I Ê N C I A SO C A R A D A S E M Â N T I C A

O C A R A S E M P R E P R E C I S A A P R E N D E R A L G O N O V O


N Ã O É O C A R A Q U E C O R TA P S D


É O C A R A Q U E C R I A E X P E R I Ê N C I A S

O G R U N T

O G R U N T

U M B U I L D S C R I P T E M J AVA S C R I P T

O G R U N T

<target name="js.minify" depends="js.preprocess"> <apply executable="java" parallel="false"> <fileset dir="." includes="foo.js, bar.js"/> <arg line="-jar"/> <arg path="yuicompressor.jar"/> <srcfile/> <arg line="-o"/> <mapper type="glob" from="*.js" to="*-min.js"/> <targetfile/> </apply> </target>

A N T

O G R U N T

module.exports = function(grunt) { grunt.initConfig({ uglify: { minify: { files: { './foo-min.js': ['./foo.js'] './bar-min.js': ['./bar.js'] } } } }); }

O G R U N T

N O S A J U D A A A U T O M AT I Z A R TA R E FA S C H ATA S

O G R U N T

N O S D Á M A I S T E M P O PA R A E S T U D A R A S N O V I D A D E S

O G R U N T

N O S D Á M A I S T E M P O PA R A C R I A R C O I S A S I N C R Í V E I S

O G R U N T

N O S A J U D A A T E S TA R S I T E S E M D I V E R S O S D I S P O S I T I V O S

O G R U N T

N O S A J U D A A O T I M I Z A R M O S



C O M O O C L I E N T E VA I C O M P R A R S E U P R O D U T O S E O S I T E N E M C A R R E G A ?


S E U C L I E N T E N E M S E M P R E E S TÁ N O W I - F IE L E P O D E A C E S S A R P E L O 3 G


A M A Z O N1 % A M A I S D E V E N D A S P R A C A D A 1 0 0 M S A M E N O S D E

C A R R E G A M E N T O

E M 2 0 0 6


// um simples script para mostrar a data function displayDate() { var elem = document.getElementById('js-date'); elem.innerHTML = Date(); ! // muda o background para 'grey' elem.style.background = 'grey'; } !displayDate();


function displayDate(){var a=document.getElementById("js-date");a.innerHTML=Date();a.style.background="grey";}displayDate();

2 4 7 B > > 1 2 4 B~ 5 0 %


E M P R O D U Ç Ã O , O C Ó D I G O N Ã O P R E C I S A S E R L E G Í V E L


I M A G E N S TA M B É M P O D E M S E R O T I M I Z A D A S

7 3 4 K B 2 5 9 K B~ 6 5 %


4 7 5 K B~ 1 , 6 S E G U N D O S N O 3 G ( 3 0 0 k b p s )

1 6 % A M A I S D E V E N D A S PA R A A A M A Z O N


T E S T E A O T I M I Z A Ç Ã O D O S E U S I T E

Pagespeed WebpageTest

https://developers.google.com/speed/pagespeed/

http://www.webpagetest.org




A M U D A N Ç A N A M K T


( Q U A N D O E R A )

N Ã O E X I S T I A M P R O C E S S O S D E A U T O M A Ç Ã OT U D O E R A N A M Ã O

S H E L L S C R I P T T E R M I N A L A P L I C AT I V OS I T E S


P R O C E S S O I N I C I A L A G I L I Z A D OG A R A N T I A D E U M P R O D U T O F I N A L D E Q U A L I D A D E

S A S S E C O M PA S S C O F F E E S C R I P T O T I M I Z A Ç Ã O


A I N D A VA M O S A D I C I O N A R

I N T E G R A Ç Ã O C O N T Í N U AE N V I O D E A R Q U I V O S PA R A O S E R V I D O R ( D E P L O Y )

O Q U E V I M O S

O Q U E V I M O S

I S T O I N F L U E N C I A A S V E N D A S E O P O S I C I O N A M E N T O

O G R U N T VA I E C O N O M I Z A R N O S S O T E M P OO T I M I Z A R S I T E S É M U I T O I M P O R TA N T E

N Ã O H Á D E S C U L PA S PA R A O F E R E C E R P R O D U T O S I N F E R I O R E S

A PA R T E P R ÁT I C A


A P E N A S U M A R Q U I V O J S ( O U C O F F E E )C O N F I G U R A Ç Ã O A C I M A D E C O D I F I C A Ç Ã O


n p m i n s t a l l - g g r u n t - c l i


{ "name": "gruntfile", "version": "0.1.0", "repository": { "type": "git", "url": "https://github.com/mktvirtual/gruntfile" }, "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-uglify": "~0.2.4" } }

PA C K A G E . J S O N


n p m i n s t a l l


'use-strict'; module.exports = function(grunt) { grunt.initConfig({ uglify: { my_target: { files: { 'app.js': ['**/*.js'] } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); };

G R U N T F I L E . J S


D E M O N S T R A Ç Ã O C O M O M O O N






T E S TA R E M D I V E R S O S D I S P O S I T I V O S


g r u n t i m a g e m i n



g r u n t p a g e s p e e d



g r u n t r s y n c



g r u n t d e p l o y




I M A G E N S E M VÁ R I O S TA M A N H O SS C R E E N S H O T S

O Q U E A P R E N D E M O S

O Q U E A P R E N D E M O S

D E S E N V O LV E D O R F R O N T- E N D C R I A E X P E R I Ê N C I A SO G R U N T N O S E C O N O M I Z A T E M P O

O T I M I Z A R É I M P R E S C I N D Í V E LO G R U N T É FÁ C I L D E U S A R

A S U A V E Z

A S U A V E Z

C R I E S E U D I F E R E N C I A L E P R O D U T O S M E L H O R E SO T I M I Z E PA R A C O N Q U I S TA R

C O M PA R T I L H E

L E V E O F R O N T- E N D A S É R I O

C r e a t i v e C o m m o n s A t t r i b u t i o n 3 . 0 U n p o r t e d L i c e n s e

http://creativecommons.org/licenses/by/3.0/deed.pt_BR

G R U N T F I L E D A M K T V I R T U A L

A S U A V E Z

T E M P L AT E D E . H TA C C E S S

https://github.com/mktvirtual/gruntfile

http://www.mochilabinaria.com.br/template-de-htacess-modelo-simples-focado-em-seo/

H U G O B E S S A

@ H U G O B E S S A A

github twitter

H U G O B E S S A . C O M . B R

E U @ H U G O B E S S A . C O M . B R

https://github.com/hugobessaa

https://twitter.com/hugobessaa

http://hugobessa.com.br

mailto:[email protected]

Technology

Automação de tarefas com Grunt