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
89
Clean Code: Escrevendo funções que falam por si só
ritalino
3
270
Criando aplicações acessíveis em React Native
ritalino
2
150
Other Decks in Technology
See All in Technology
Next.js のページ遷移を全力で止める
ypresto
3
1.6k
自作Cコンパイラ 8時間の奮闘
soukouki
0
830
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
170
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
120
Technical Writing Meetup vol.35
soracom
PRO
2
110
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
190
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
170
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7k
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
1
920
Featured
See All Featured
BBQ
matthewcrist
83
9.2k
Code Reviewing Like a Champion
maltzj
517
39k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
The Invisible Side of Design
smashingmag
295
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
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