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
91
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
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
270
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
490
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
500
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
100
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
280
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.6k
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
180
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Designing for Performance
lara
605
68k
We Have a Design System, Now What?
morganepeng
51
7.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Being A Developer After 40
akosma
89
590k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How to train your dragon (web standard)
notwaldorf
91
5.9k
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