Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Build Tools: Entendendo as Ferramentas de Const...
Search
Rita Lino
August 10, 2019
Technology
1
260
Build Tools: Entendendo as Ferramentas de Construção Front-End
Rita Lino
August 10, 2019
Tweet
Share
More Decks by Rita Lino
See All by Rita Lino
O Mundo Front-End
ritalino
0
96
Clean Code: Escrevendo funções que falam por si só
ritalino
3
280
Criando aplicações acessíveis em React Native
ritalino
2
160
Other Decks in Technology
See All in Technology
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
170
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
210
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
450
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Building Applications with DynamoDB
mza
95
6.5k
GitHub's CSS Performance
jonrohan
1031
460k
Raft: Consensus for Rubyists
vanstee
140
7k
Agile that works and the tools we love
rasmusluckow
329
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Embracing the Ebb and Flow
colly
86
4.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Transcript
Build Tools: Entendendo as Ferramentas de Construção Front-End
SOBRE MIM! Rita Lino Caiçara Desenvolvedora Front-End na Creditas Idealizadora
da comunidade "Mulheres na Tecnologia Baixada Santista" @ritalinux @rita-lino
#1
#2
#3
Minification Concatenation Tree Shaking Transpilation Bundling Image Optimization Code Splitting
Compression
Imagina só ter que fazer isso tudo na mão?
É onde as Build Tools entram em cena!
Build Tools Task Runners Bundlers
Build Tools Task Runners Bundlers
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
Task Runners > npm scripts e yarn
Build Tools Task Runners Bundlers
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>
Bundlers > Webpack .js .hbs .css .sass .js .ts .sass
.png .jpg .js .css .png .jpg
Bundlers > Webpack Entry Output ./src/index.js ./dist/main.js ./dist
Loaders Mode Bundlers > Webpack production development none Nos permitem
gerar bundles a partir de qualquer tipo de asset
Tá… mas qual eu uso?
Build Tools possuem uma curva de aprendizado, aprenda o necessário.
Lembre-se: Automatização é a chave da produtividade
Obrigada! @ritalinux @rita-lino Temos vagas! jobs.kenoby.com/creditas