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 Construção Front-End
Search
Rita Lino
August 10, 2019
Technology
1
250
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
82
Clean Code: Escrevendo funções que falam por si só
ritalino
3
260
Criando aplicações acessíveis em React Native
ritalino
2
140
Other Decks in Technology
See All in Technology
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
150
Databricks における 『MLOps』
databricksjapan
2
170
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
240
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
300
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
350
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
370
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
510
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
860
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
890
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
2
2.2k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
760
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Code Reviewing Like a Champion
maltzj
514
39k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
How to train your dragon (web standard)
notwaldorf
73
5.2k
The Invisible Customer
myddelton
114
12k
Docker and Python
trallard
34
2.7k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Bash Introduction
62gerente
604
210k
Designing the Hi-DPI Web
ddemaree
276
33k
KATA
mclloyd
15
12k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Designing for Performance
lara
601
67k
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