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

Transcript

1. 1.

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

2. 2.

   SOBRE MIM! Rita Lino Caiçara Desenvolvedora Front-End na Creditas Idealizadora

   da comunidade "Mulheres na Tecnologia Baixada Santista" @ritalinux @rita-lino
3. 3.

   #1

4. 4.

   #2

5. 5.

   #3

6. 6.

   Minification Concatenation Tree Shaking Transpilation Bundling Image Optimization Code Splitting

   Compression
7. 7.

   Imagina só ter que fazer isso tudo na mão?

8. 8.

   É onde as Build Tools entram em cena!

9. 9.

   Build Tools Task Runners Bundlers

10. 10.

    Build Tools Task Runners Bundlers

11. 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. 12.

    Task Runners > npm scripts e yarn

13. 13.

    Build Tools Task Runners Bundlers

14. 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. 15.

    Bundlers > Webpack .js .hbs .css .sass .js .ts .sass

    .png .jpg .js .css .png .jpg
16. 16.

    Bundlers > Webpack Entry Output ./src/index.js ./dist/main.js ./dist

17. 17.

    Loaders Mode Bundlers > Webpack production development none Nos permitem

    gerar bundles a partir de qualquer tipo de asset
18. 18.

    Tá… mas qual eu uso?

19. 19.

    Build Tools possuem uma curva de aprendizado, aprenda o necessário.

20. 20.

    Lembre-se: Automatização é a chave da produtividade

21. 21.

    Obrigada! @ritalinux @rita-lino Temos vagas! jobs.kenoby.com/creditas