Automação de tarefas com Grunt

4,457 views
4,339 views

Published on

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.

Published in: Technology

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

×