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
Automatizando processos de frontend e deploy usando Gulp
Search
Thiago Borges
September 26, 2014
Programming
0
88
Automatizando processos de frontend e deploy usando Gulp
Apresentado no Café com Dev em Londrina dia 26/09/2014 por Thiago Borges
Thiago Borges
September 26, 2014
Tweet
Share
More Decks by Thiago Borges
See All by Thiago Borges
Bourbon, neat e bitters no github-pages
thiagoborges
0
54
Como o Rails melhorou o desenvolvimento web
thiagoborges
0
49
Como o Rails melhorou o desenvolvimento web
thiagoborges
0
110
Other Decks in Programming
See All in Programming
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Git Rebase
bkuhlmann
11
1.6k
Code Reviews
bkuhlmann
4
890
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
280
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
770
Anthropic Cookbook のおすすめレシピ
schroneko
7
1k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
11
4.5k
Building Applications with DynamoDB
mza
88
5.6k
Why Our Code Smells
bkeepers
PRO
331
56k
Music & Morning Musume
bryan
41
5.6k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
The Invisible Customer
myddelton
114
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Transcript
Automatizando processos de frontend e deploy usando Gulp Thiago Borges
! Desenvolvedor ~4 anos Ruby, Python, iOS @tgabrielborges http://thiagoborg.es/ Thiago
Borges
Problemas de frontend
• Cada nova requisição no browser leva no mínimo 20ms,
mas pode levar 100ms ou mais Carregamento da página
None
Cada um tem seu padrão
Tarefas repetitivas
Gulp "The streaming build system"
Como usar Gulp
Começando 1. $ npm install --global gulp 2. $ npm
init 3. $ npm install --save-dev gulp 4. Criar o arquivo gulpfile.js 5. Executar $ gulp
Fluxo Básico
Executar uma task gulp.task('mytask', function() { // Faz algo aqui
})
Executar várias tasks gulp.task('mytask',['array', 'of', 'task'], function() { // Faz
algo aqui })
Otimizando o carregamento da página • Concat • Minify •
Ugligy • Resize e otimização de imagens
Exemplo
Código mais limpo • SASS/LESS • CoffeeScript • Autoprefixer
Exemplo
Padrões ! • Executam a Análise do código baseado em
um guideline • gulp-jshint • gulp-coffeelint • gulp-scss-lint • gulp-csslint
Exemplo
Deploy
Exemplo
http://gulpjs.com/
None
Alternativas • Grunt.js • Brocolli • CodeKit
Obrigado
Links • https://ninefold.com/blog/2014/07/01/rails-and- the-warped-asset-pipeline/ • http://browserdiet.com/pt/ • https://developer.yahoo.com/performance/ rules.html •
http://guides.rubyonrails.org/asset_pipeline.html • http://www.jshint.com/docs/options/