#MKTMEETUP

AUTOMAÇÃO DE
TA R E F A S C O M O

GRUNT
HUGO BESSA
HUGO BESSA

D E S E N V O LV E D O R F R O N T- E N D
E N T U S I A S TA D E O T I M I Z A Ç Ã O
MUNDO OPEN SOURCE
O CONTEÚDO
O CONTEÚDO

O D E S E N V O LV E D O R F R O N T- E N D
A OTIMIZAÇÃO
O GRUNT
A MUDANÇA NA MKT
A MUDANÇA NO MUNDO
A PA R T ...
O D E S E N V O LV E D O R

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

O CARA QUE DEIXA O SITE BONITINHO
O C A R A Q U E FA Z A Q U E L E S S C R I ...
O D E S E N V O LV E D O R F R O N T- E N D

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

O CARA QUE CRIA EXPERIÊNCIAS
O CARA DA SEMÂNTICA
O CARA DA PERFORMANCE
O CARA...
O D E S E N V O LV E D O R F R O N T- E N D

N Ã O É O C A R A Q U E C O R TA P S D
O D E S E N V O LV E D O R F R O N T- E N D

É O CARA QUE CRIA EXPERIÊNCIAS
O GRUNT
O GRUNT
U M B U I L D S C R I P T E M J AVA S C R I P T
O GRUNT

<target name="js.minify" depends="js.preprocess">
<apply executable="java" parallel="false">
<fileset dir="." inc...
O GRUNT

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

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

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 GRUNT

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 GRUNT

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
DISPOSITIVOS
O GRUNT

NOS AJUDA A OTIMIZARMOS
A OTIMIZAÇÃO
A OTIMIZAÇÃO

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
SITE NEM CARREGA?
A OTIMIZAÇÃO

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 I
ELE PODE ACESSAR PELO 3G
A OTIMIZAÇÃO

AMAZON
1% A MAIS DE VENDAS PRA CADA 100MS A MENOS DE
CARREGAMENTO

EM 2006
A OTIMIZAÇÃO

// um simples script para mostrar a data
function displayDate() {
var elem = document.getElementById('js-dat...
A OTIMIZAÇÃO

function displayDate(){var a=document.getElementById("jsdate");a.innerHTML=Date();a.style.background="grey";...
A OTIMIZAÇÃO

EM PRODUÇÃO, O CÓDIGO NÃO PRECISA SER LEGÍVEL
A OTIMIZAÇÃO

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
734KB 259KB
~65%
A OTIMIZAÇÃO

475KB
~1,6 SEGUNDOS NO 3G (300kbps)
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
A OTIMIZAÇÃO

TESTE A OTIMIZAÇÃO DO SEU SITE

Pagespeed

WebpageTest
A OTIMIZAÇÃO
A OTIMIZAÇÃO
A OTIMIZAÇÃO
A MUDANÇA NA MKT
A MUDANÇA NA MKT

NÃO EXISTIAM PROCESSOS DE AUTOMAÇÃO
TUDO ERA NA MÃO
(QUANDO ERA)

SHELL SCRIPT

TERMINAL

SITES

A P L I...
A MUDANÇA NA MKT

PROCESSO INICIAL AGILIZADO
GARANTIA DE UM PRODUTO FINAL DE QUALIDADE

S A S S E C O M PA S S

COFFEESCRI...
A MUDANÇA NA MKT

A I N D A VA M O S A D I C I O N A R
INTEGRAÇÃO CONTÍNUA
E N V I O D E A R Q U I V O S PA R A O S E R V ...
O QUE VIMOS
O QUE VIMOS

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 O
O T I M I Z A R S I T E S É M U I T O I M P O R TA N...
A PA R T E P R ÁT I C A
A PA R T E P R ÁT I C A

APENAS UM ARQUIVO JS (OU COFFEE)
CONFIGURAÇÃO ACIMA DE CODIFICAÇÃO
A PA R T E P R ÁT I C A

npm install -g grunt-cli
A PA R T E P R ÁT I C A
PA C K A G E . J S O N
{

}

"name": "gruntfile",
"version": "0.1.0",
"repository": {
"type": "git...
A PA R T E P R ÁT I C A

npm install
A PA R T E P R ÁT I C A
GRUNTFILE.JS
'use-strict';
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_targ...
A PA R T E P R ÁT I C A

DEMONSTRAÇÃO COM O MOON
A PA R T E P R ÁT I C A
A PA R T E P R ÁT I C A
A PA R T E P R ÁT I C A
A PA R T E P R ÁT I C A
A PA R T E P R ÁT I C A

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
A PA R T E P R ÁT I C A

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

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

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

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

I M A G E N S E M V Á R I O S TA M A N H O S
SCREENSHOTS
O QUE APRENDEMOS
O QUE APRENDEMOS

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 S
O GRUNT NOS ECONOMIZA TEMPO
OT...
A SUA VEZ
A SUA VEZ

L E V E O F R O N T- E N D A S É R I O
CRIE SEU DIFERENCIAL E PRODUTOS MELHORES
O T I M I Z E PA R A C O N Q U ...
A SUA VEZ

GRUNTFILE DA MKT VIRTUAL
T E M P L AT E D E . H TA C C E S S
HUGO BESSA

@HUGOBESSAA

github

twitter

HUGOBESSA.COM.BR
EU@HUGOBESSA.COM.BR
Automação de tarefas com Grunt
Próxima SlideShare
Cargando en…5
×

Automação de tarefas com Grunt

4.520 visualizaciones

Publicado el

Durante o dia de um desenvolvedor web existem diversas tarefas chatas e repetitivas que precisam ser realizadas. Validar, compilar, minificar, otimizar imagens e enviar tudo isso para o ambiente de produção são só algumas delas. Utilizando o Grunt para automatizar toda essa parte chata, você fica só com a parte legal de desenvolver. Durante a apresentação, você aprenderá a aplicar o Grunt a um projeto e usar seus diversos plugins para melhorar seu workflow de desenvolvimento de sites. Além disso, você entenderá um pouco mais sobre otimização dos arquivos que compõem um site: scripts, css, imagens e mais.

Publicado en: Tecnología
0 comentarios
11 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
4.520
En SlideShare
0
De insertados
0
Número de insertados
2.452
Acciones
Compartido
0
Descargas
37
Comentarios
0
Recomendaciones
11
Insertados 0
No insertados

No hay notas en la diapositiva.

Automação de tarefas com Grunt

  1. 1. #MKTMEETUP AUTOMAÇÃO DE TA R E F A S C O M O GRUNT
  2. 2. HUGO BESSA
  3. 3. HUGO BESSA D E S E N V O LV E D O R F R O N T- E N D E N T U S I A S TA D E O T I M I Z A Ç Ã O MUNDO OPEN SOURCE
  4. 4. O CONTEÚDO
  5. 5. O CONTEÚDO O D E S E N V O LV E D O R F R O N T- E N D A OTIMIZAÇÃO O GRUNT A MUDANÇA NA MKT A MUDANÇA NO MUNDO A PA R T E P R ÁT I C A A SUA VEZ
  6. 6. O D E S E N V O LV E D O R F R O N T- E N D
  7. 7. O D E S E N V O LV E D O R F R O N T- E N D O CARA QUE DEIXA O SITE BONITINHO O 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 Á O “ M O N TA D O R ”
  8. 8. O D E S E N V O LV E D O R F R O N T- E N D NÃO
  9. 9. O D E S E N V O LV E D O R F R O N T- E N D O CARA QUE CRIA EXPERIÊNCIAS O CARA DA SEMÂNTICA O CARA DA PERFORMANCE O CARA SEMPRE PRECISA APRENDER ALGO NOVO
  10. 10. O D E S E N V O LV E D O R F R O N T- E N D N Ã O É O C A R A Q U E C O R TA P S D
  11. 11. O D E S E N V O LV E D O R F R O N T- E N D É O CARA QUE CRIA EXPERIÊNCIAS
  12. 12. O GRUNT
  13. 13. O GRUNT U M B U I L D S C R I P T E M J AVA S C R I P T
  14. 14. O GRUNT <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> ANT
  15. 15. O GRUNT module.exports = function(grunt) { grunt.initConfig({ uglify: { minify: { files: { './foo-min.js': ['./foo.js'] './bar-min.js': ['./bar.js'] } } } }); }
  16. 16. O GRUNT N O S A J U D A A A U T O M AT I Z A R TA R E F A S C H ATA S
  17. 17. O GRUNT 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
  18. 18. O GRUNT 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
  19. 19. O GRUNT 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 DISPOSITIVOS
  20. 20. O GRUNT NOS AJUDA A OTIMIZARMOS
  21. 21. A OTIMIZAÇÃO
  22. 22. A OTIMIZAÇÃO 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 SITE NEM CARREGA?
  23. 23. A OTIMIZAÇÃO 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 I ELE PODE ACESSAR PELO 3G
  24. 24. A OTIMIZAÇÃO AMAZON 1% A MAIS DE VENDAS PRA CADA 100MS A MENOS DE CARREGAMENTO EM 2006
  25. 25. A OTIMIZAÇÃO // 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();
  26. 26. A OTIMIZAÇÃO function displayDate(){var a=document.getElementById("jsdate");a.innerHTML=Date();a.style.background="grey";}displayDate(); 247B >> 124B ~50%
  27. 27. A OTIMIZAÇÃO EM PRODUÇÃO, O CÓDIGO NÃO PRECISA SER LEGÍVEL
  28. 28. A OTIMIZAÇÃO 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
  29. 29. 734KB 259KB ~65%
  30. 30. A OTIMIZAÇÃO 475KB ~1,6 SEGUNDOS NO 3G (300kbps) 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
  31. 31. A OTIMIZAÇÃO TESTE A OTIMIZAÇÃO DO SEU SITE Pagespeed WebpageTest
  32. 32. A OTIMIZAÇÃO
  33. 33. A OTIMIZAÇÃO
  34. 34. A OTIMIZAÇÃO
  35. 35. A MUDANÇA NA MKT
  36. 36. A MUDANÇA NA MKT NÃO EXISTIAM PROCESSOS DE AUTOMAÇÃO TUDO ERA NA MÃO (QUANDO ERA) SHELL SCRIPT TERMINAL SITES A P L I C AT I V O
  37. 37. A MUDANÇA NA MKT PROCESSO INICIAL AGILIZADO GARANTIA DE UM PRODUTO FINAL DE QUALIDADE S A S S E C O M PA S S COFFEESCRIPT OTIMIZAÇÃO
  38. 38. A MUDANÇA NA MKT A I N D A VA M O S A D I C I O N A R INTEGRAÇÃO CONTÍNUA E 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 )
  39. 39. O QUE VIMOS
  40. 40. O QUE VIMOS 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 O O 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 ISTO INFLUENCIA AS VENDAS E O POSICIONAMENTO 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 INFERIORES
  41. 41. A PA R T E P R ÁT I C A
  42. 42. A PA R T E P R ÁT I C A APENAS UM ARQUIVO JS (OU COFFEE) CONFIGURAÇÃO ACIMA DE CODIFICAÇÃO
  43. 43. A PA R T E P R ÁT I C A npm install -g grunt-cli
  44. 44. A PA R T E P R ÁT I C A PA C K A G E . J S O N { } "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" }
  45. 45. A PA R T E P R ÁT I C A npm install
  46. 46. A PA R T E P R ÁT I C A GRUNTFILE.JS 'use-strict'; module.exports = function(grunt) { grunt.initConfig({ uglify: { my_target: { files: { 'app.js': ['**/*.js'] } } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); };
  47. 47. A PA R T E P R ÁT I C A DEMONSTRAÇÃO COM O MOON
  48. 48. A PA R T E P R ÁT I C A
  49. 49. A PA R T E P R ÁT I C A
  50. 50. A PA R T E P R ÁT I C A
  51. 51. A PA R T E P R ÁT I C A
  52. 52. A PA R T E P R ÁT I C A 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
  53. 53. A PA R T E P R ÁT I C A grunt imagemin
  54. 54. A PA R T E P R ÁT I C A
  55. 55. A PA R T E P R ÁT I C A grunt pagespeed
  56. 56. A PA R T E P R ÁT I C A
  57. 57. A PA R T E P R ÁT I C A grunt rsync
  58. 58. A PA R T E P R ÁT I C A
  59. 59. A PA R T E P R ÁT I C A grunt deploy
  60. 60. A PA R T E P R ÁT I C A
  61. 61. A PA R T E P R ÁT I C A
  62. 62. A PA R T E P R ÁT I C A I M A G E N S E M V Á R I O S TA M A N H O S SCREENSHOTS
  63. 63. O QUE APRENDEMOS
  64. 64. O QUE APRENDEMOS 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 S O GRUNT NOS ECONOMIZA TEMPO OTIMIZAR É IMPRESCINDÍVEL O G R U N T É FÁ C I L D E U S A R
  65. 65. A SUA VEZ
  66. 66. A SUA VEZ L E V E O F R O N T- E N D A S É R I O CRIE SEU DIFERENCIAL E PRODUTOS MELHORES O 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 Creative Commons Attribution 3.0 Unported License
  67. 67. A SUA VEZ GRUNTFILE DA MKT VIRTUAL T E M P L AT E D E . H TA C C E S S
  68. 68. HUGO BESSA @HUGOBESSAA github twitter HUGOBESSA.COM.BR EU@HUGOBESSA.COM.BR

×