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.

1. #MKTMEETUP
AUTOMAÇÃO DE
TA R E F A S C O M O
GRUNT

2. HUGO BESSA

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. O CONTEÚDO

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. O D E S E N V O LV E D O R
F R O N T- E N D

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. O D E S E N V O LV E D O R F R O N T- E N D
NÃO

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

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. 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. O GRUNT
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
minify: {
files: {
'./foo-min.js': ['./foo.js']
'./bar-min.js': ['./bar.js']
}
}
}
});
}

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. 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. 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. 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. O GRUNT
NOS AJUDA A OTIMIZARMOS

21. A OTIMIZAÇÃO

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. 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. A OTIMIZAÇÃO
AMAZON
1% A MAIS DE VENDAS PRA CADA 100MS A MENOS DE
CARREGAMENTO
EM 2006

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. A OTIMIZAÇÃO
function displayDate(){var a=document.getElementById("jsdate");a.innerHTML=Date();a.style.background="grey";}displayDate();
247B >> 124B
~50%

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

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. 734KB 259KB
~65%

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. A OTIMIZAÇÃO
TESTE A OTIMIZAÇÃO DO SEU SITE
Pagespeed
WebpageTest

32. A OTIMIZAÇÃO

33. A OTIMIZAÇÃO

34. A OTIMIZAÇÃO

35. A MUDANÇA NA MKT

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. 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. 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. O QUE VIMOS

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

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. A PA R T E P R ÁT I C A
npm install -g grunt-cli

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

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. A PA R T E P R ÁT I C A
DEMONSTRAÇÃO COM O MOON

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

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

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

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

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

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

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

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

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

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

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

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

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

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

63. 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

64. O QUE APRENDEMOS

65. 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

66. A SUA VEZ

67. 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

68. A SUA VEZ
GRUNTFILE DA MKT VIRTUAL
T E M P L AT E D E . H TA C C E S S

69. HUGO BESSA
@HUGOBESSAA
github
twitter
HUGOBESSA.COM.BR
EU@HUGOBESSA.COM.BR