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
170
Other Decks in Technology
See All in Technology
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
140
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
Observability — Extending Into Incident Response
nari_ex
1
100
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
gree_tech
PRO
1
350
知覚とデザイン
rinchoku
1
480
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
1
170
20251027_マルチエージェントとは
almondo_event
0
120
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
170
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
130
頭部ふわふわ浄酔器
uyupun
0
110
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Writing Fast Ruby
sferik
630
62k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Designing Experiences People Love
moore
142
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Thoughts on Productivity
jonyablonski
70
4.9k
Fireside Chat
paigeccino
41
3.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.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