Ganhando tempo com Task Runners
Transferir como PPTX, PDF0 gostou201 visualizações
Este documento discute como usar Task Runners como Grunt e Gulp para automatizar tarefas de desenvolvimento como minificação e concatenação de arquivos, compressão de imagens, validação de código e deploy de aplicações. Task Runners podem executar essas tarefas e pré-processadores como Sass, CoffeeScript para agilizar o workflow de desenvolvimento.
![Compressão de Imagens
imagemin: {
dist: {
options: {
optimizationLevel:
7,
progressive: true
},
files: [{
expand: true,
filter: 'isFile',
cwd: '<%=
dirs.images %>/',
src:
'**/*.{png,jpg,gif}',
dest: '<%=
dirs.images %>/'
}]](https://image.slidesharecdn.com/aefqsktyqcvg4bcqpbcw-signature-40e9ab94fac2747b604ae245249a97def2f6fdf08497cd6effca190093c4ced0-poli-160314154304/85/Ganhando-tempo-com-Task-Runners-16-320.jpg)
Ganhando tempo com Task Runners
- 1. Ganhando tempo com Task Runners Fabio Carvalho
- 3. PERFORMANCE
- 12. Task Runners Grunt, Gulp, Cake, Broccoli, ..
- 14. O que podemos fazer?
- 16. Compressão de Imagens imagemin: { dist: { options: { optimizationLevel: 7, progressive: true }, files: [{ expand: true, filter: 'isFile', cwd: '<%= dirs.images %>/', src: '**/*.{png,jpg,gif}', dest: '<%= dirs.images %>/' }]
- 17. JSHint
- 18. Live Preview
- 20. DEPLOY
- 21. rsync: { staging: { options: { src: '../', dest: '~/PATH', host: 'user@host.com' } }, production: { options: { src: '../', dest: '~/PATH', host: Deploy - SSH & FTP $ grunt ftp // ftp $ grunt r:prod // ssh
- 23. <body> <h1>2º Meetup Developers & TI GV</h1> <h2>Seja bem-vindo!</h2> <main> <div class="container"> <p>Você é foda!</p> </div> </main> </body> HTML - JADE body h1 2º Meetup Developers & TI GV h2 Seja bem-vindo! main .container if youAreUsingJade p Você é foda! else p Não creio!
- 24. CSS - SASS .card { background-color: #EEE; .title { color: #999; font-size: 18px; font-weight: bold; } .description { font-size: 14px; } } .card { background-color: #EEE } .card .title { color: #999; font-size: 18px; font-weight: bold; } .card .description { font-size: 14px; }
- 25. JavaScript - CoffeeScript outer = 1 changeNumbers = -> inner = -1 outer = 10 inner = changeNumbers() var changeNumbers, inner, outer; outer = 1; changeNumbers = function() { var inner; inner = -1; return outer = 10; }; inner = changeNumbers();
- 26. TASK WATCH
- 28. Dúvidas?
Notas do Editor
- #2: Alguém aqui é front-end? Já ouviram falar de Grunt ou Gulp?
- #3: Meu nome é Fabio Carvalho, sou desenvolvedor front-end há 7 anos e atualmente Full Stack Developer na Apiki. Aqui estão algumas redes sociais, para encontrar basta pesquisar por: fccoelho7
- #4: Performance hoje em dia é crucial! Pesquisas revelam que sites performáticos são super bem vistos pelo o Google e proporcionam uma expriência melhor para o usuário.
- #6: Esse é um grande amigo nosso! Bom, dentre alguns dos requisitos para se atingir níveis elevados no Google PageSpeed podemos citar: minificação de html, css e js; compressão de imagens; concatenação de css e js; entre outros.
- #7: E é buscando performance que utilizamos alguns serviços/sites para fazer esse trabalho para nós. Bom, alguns ainda fazem isso.
- #11: Putz! Mas em todo projeto vamos precisar utilizar essas ferramentas, site por site, até deixar o nosso projeto performático?
- #12: Por quê não utilizar tarefas para automatizar tudo isso?
- #13: Aposto que alguns aqui já ouviram falar de Grunt ou Gulp, bom, estas ferramentas se tornam essenciais quando se almeja agilidade no desenvolvimento web. Há uma disputa bem grande no uso dos dois, mas não é minha intenção promover uma disputa e sim, ilustrar o que podemos fazer. Nesta palestra vou exemplificar algumas tasks usando a estrutura padrão do Grunt.
- #14: Ambos são executados na plataforma Node.js e escritos em JavaScript, o que torna tudo mais simples e rápido.
- #17: t
- #21: Noite e mais noites mal dormidas, preocupação, ansiedade até a hora em que seu código está funcionando, hora do deploy!
- #27: É, talvez, a rotina mais importante! Ela será responsável por assistir quaisquer alterações em nosso código.
- #28: Que tal começar hoje? Preparei uma material de suporte, um boilerplate, e uma documentação sobre como configurar tudo em seu computador. Nele está presente todas as rotinas mencionadas neste talk.