Build Tools: Entendendo as Ferramentas de Construção Front-End

Transcript

1. Build Tools: Entendendo as Ferramentas de Construção Front-End
2. SOBRE MIM! Rita Lino Caiçara Desenvolvedora Front-End na Creditas Idealizadora da comunidade "Mulheres na Tecnologia Baixada Santista" @ritalinux @rita-lino
3. #1
4. #2
5. #3
6. Minification Concatenation Tree Shaking Transpilation Bundling Image Optimization Code Splitting Compression
7. Imagina só ter que fazer isso tudo na mão?
8. É onde as Build Tools entram em cena!
9. Build Tools Task Runners Bundlers
10. Build Tools Task Runners Bundlers
11. Task Runners > Grunt e Gulp Processo de execução Arquivos temporários no disco local Memória Número de tasks simultâneas Uma Múltiplas Conceito Configuração acima do código Código acima da configuração
12. Task Runners > npm scripts e yarn
13. Build Tools Task Runners Bundlers
14. Bundlers > browserify Analisa todas as chamadas require() da sua aplicação para criar um bundle que possa ser mandado para o browser em uma única tag <script>
15. Bundlers > Webpack .js .hbs .css .sass .js .ts .sass .png .jpg .js .css .png .jpg
16. Bundlers > Webpack Entry Output ./src/index.js ./dist/main.js ./dist
17. Loaders Mode Bundlers > Webpack production development none Nos permitem gerar bundles a partir de qualquer tipo de asset
18. Tá… mas qual eu uso?
19. Build Tools possuem uma curva de aprendizado, aprenda o necessário.
20. Lembre-se: Automatização é a chave da produtividade
21. Obrigada! @ritalinux @rita-lino Temos vagas! jobs.kenoby.com/creditas