Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Automatização
no desenvolvimento Web
com Gulp
Ricardo Costa
http://netponto.org59ª Reunião Presencial - 23/01/2016
Ricardo Costa
• Licenciado em Engª Electrotécnica e
Computadores na Faculdade de Ciências e
Tecnologia na UNL.
• Actualmen...
Agenda
• gulp()
• conceitosBase()
• gerir(frameworks)
• optimizar(imagens)
• injectar(referencias)
• deploy(dev)
• watch()...
Gulp
• Gulp é um “task runner” baseado em node.js.
• Tem um ecossistema enorme de plugins.
• Facilita tarefas recorrentes ...
conceitosBase()
• 4 funções base
– src
– dest
– task
– watch
• Streams
• Pipe
conceitosBase()
var gulp = require('gulp');
gulp.task('copy', function () {
return gulp.src('./source/*.txt')
.pipe(gulp.d...
conceitos base
ambiente
web site
• app
• css
• js
• images
• bower_components
• index.html
• dist
• webapi
web site
• app
• css
• js
• im...
gerir(frameworks)
• bower.io
– Facilita a gestão de frameworks (jquery, bootstrap, fa,
angular, entre outras)
• Plugin esp...
gerir(frameworks)
var vendorScripts = function () {
return gulp.src('./bower.json')
.pipe(bowerFiles(config.mainBowerFiles...
gerir(frameworks)
var styles = function () {
return gulp.src('./bower.json')
.pipe(bowerFiles(config.mainBowerFilesOverrid...
bower.io
optimizar(imagens)
• Plugin específico para optimização de imagens
• https://www.npmjs.com/package/gulp-imagemin
• Diminui...
optimizar(imagens)
gulp.task('images', function () {
return gulp.src('app/img/*')
.pipe(imagemin())
.pipe(gulp.dest(config...
imagemin
injectar(referencias)
• Plugin para adicionar dinamicamente em ficheiros
html as referências para estilos e scripts
• http...
injectar(referencias)
gulp.task('html', function () {
var target = gulp.src('app/index.html');
var sources = gulp.src([con...
inject
deploy(dev)
web site
• app
• css
• js
• images
• bower_components
• index.html
• dist
• webapi
web site
• app
• css
• js
•...
deploy(dev)
gulp.task('deploy', sequence(['styles', 'scripts', 'images'], 'html'));
deploy
watch()
sincronizar(browsers.All)
• Detectar alterações e correr tarefas
automaticamente
• Browser Sync para simplificar t...
watch()
sincronizar(browsers.All)
gulp.task('sync', function () {
browserSync.init({
proxy: "localhost/Netponto/dist/"
});...
browser sync
uglify() + minify()
• Utilização para scripts e estilos
• https://www.npmjs.com/package/gulp-uglifyjs
• https://www.npmjs....
uglify() + minify()
gulp.task('prodScripts', function () {
return merge(vendorScripts(), appScripts())
.pipe(order(['jquer...
uglify & minify
deploy(prod)
web site
• app
• css
• js
• images
• bower_components
• index.html
• dist
• webapi
web site
• app
• css
• js
...
deploy(prod)
gulp.task('prodWatch', function () {
gulp.watch('./app/css/*.css', ['prodStyles'])
.on('change', browserSync....
deploy
integrar(visualStudio[2015])
– Visual Studio já permite integração com o gulp através
do Task Runer Explorer
– Permita atr...
Dúvidas?
Referências
Site Gulp
– http://gulpjs.com/
Site Node Package Manager
– https://www.npmjs.com/
Site bower.io
– http://bower...
Patrocinadores “GOLD”
Twitter: @PTMicrosoft http://www.microsoft.com/portugal
Patrocinadores “Silver”
Patrocinadores “Bronze”
http://bit.ly/netponto-aval-59
* Para quem não puder preencher durante a reunião,
iremos enviar um email com o link à tarde
Próximas reuniões presenciais
23/01/2016 – Lisboa
20/02/2016 – Braga
27/02/2016 – Lisboa
19/03/2016 – Lisboa
26/03/2016 – ...
Obrigado!
Ricardo Costa
https://www.linkedin.com/in/kosta
http://blogit.create.pt/ricardocosta
ricardo.costa@create.pt
Upcoming SlideShare
Loading in …5
×

Automatização Desenvolvimento Web com Gulp

Sessão na comunidade NetPonto - 23-01-2016

  • Login to see the comments

  • Be the first to like this

Automatização Desenvolvimento Web com Gulp

  1. 1. Automatização no desenvolvimento Web com Gulp Ricardo Costa http://netponto.org59ª Reunião Presencial - 23/01/2016
  2. 2. Ricardo Costa • Licenciado em Engª Electrotécnica e Computadores na Faculdade de Ciências e Tecnologia na UNL. • Actualmente consultor sénior na |create|it| , uma empresa focada na área de soluções colaborativas e integração de sistemas. • Participação e implementação de diversas soluções desde a análise e concepção, passando também pela arquitectura. • Preferência pelas áreas de SOA e integração.
  3. 3. Agenda • gulp() • conceitosBase() • gerir(frameworks) • optimizar(imagens) • injectar(referencias) • deploy(dev) • watch() • sincronizar(browsers.All) • uglify() • minify() • deploy(prod) • integrar(visualStudio[2015])
  4. 4. Gulp • Gulp é um “task runner” baseado em node.js. • Tem um ecossistema enorme de plugins. • Facilita tarefas recorrentes do desenvolvimento. • Permite a criação de workflows complexos.
  5. 5. conceitosBase() • 4 funções base – src – dest – task – watch • Streams • Pipe
  6. 6. conceitosBase() var gulp = require('gulp'); gulp.task('copy', function () { return gulp.src('./source/*.txt') .pipe(gulp.dest('./target')); }); var sass = require('gulp-sass'); gulp.task('styles', function () { return gulp.src('./source/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(gulp.dest('./target')); }); var typescript = require('gulp-typescript'); gulp.task('scripts', function () { return gulp.src('./source/*.ts') .pipe(typescript()) .pipe(gulp.dest('./target')); });
  7. 7. conceitos base
  8. 8. ambiente web site • app • css • js • images • bower_components • index.html • dist • webapi web site • app • css • js • images • bower_components • index.html • dist • css • js • images • index.html • webapi
  9. 9. gerir(frameworks) • bower.io – Facilita a gestão de frameworks (jquery, bootstrap, fa, angular, entre outras) • Plugin específico para obter os ficheiros que constituem cada uma das frameworks • https://www.npmjs.com/package/main-bower- files
  10. 10. gerir(frameworks) var vendorScripts = function () { return gulp.src('./bower.json') .pipe(bowerFiles(config.mainBowerFilesOverride)) .pipe(filter('**/*.js')) .pipe(flatten()); }; var appScripts = function () { return gulp.src('./app/js/*.js'); }; gulp.task('scripts', function () { return merge(vendorScripts(), appScripts()) .pipe(gulp.dest(config.dest + 'js')); });
  11. 11. gerir(frameworks) var styles = function () { return gulp.src('./bower.json') .pipe(bowerFiles(config.mainBowerFilesOverride)) .pipe(filter(['**/*.css', '!**/*.min.css'])) .pipe(addsrc('./app/css/*.css')) .pipe(flatten()); }; gulp.task('styles', function () { return styles() .pipe(gulp.dest(config.dest + 'css')); });
  12. 12. bower.io
  13. 13. optimizar(imagens) • Plugin específico para optimização de imagens • https://www.npmjs.com/package/gulp-imagemin • Diminui o tamanho dos ficheiros de imagens
  14. 14. optimizar(imagens) gulp.task('images', function () { return gulp.src('app/img/*') .pipe(imagemin()) .pipe(gulp.dest(config.dest + 'img')); });
  15. 15. imagemin
  16. 16. injectar(referencias) • Plugin para adicionar dinamicamente em ficheiros html as referências para estilos e scripts • https://www.npmjs.com/package/gulp-inject • Facilita a definição fo HTML e das tags – <link rel="stylesheet" href="/src/style1.css"> – <script src="/src/lib1.js"></script>
  17. 17. injectar(referencias) gulp.task('html', function () { var target = gulp.src('app/index.html'); var sources = gulp.src([config.dest + 'css/*', config.dest + 'js/*']); return target.pipe(inject(sources, { ignorePath: 'dist/', addRootSlash: false })) .pipe(gulp.dest(config.dest)); });
  18. 18. inject
  19. 19. deploy(dev) web site • app • css • js • images • bower_components • index.html • dist • webapi web site • app • css • js • images • bower_components • index.html • dist • css • js • images • index.html • webapi
  20. 20. deploy(dev) gulp.task('deploy', sequence(['styles', 'scripts', 'images'], 'html'));
  21. 21. deploy
  22. 22. watch() sincronizar(browsers.All) • Detectar alterações e correr tarefas automaticamente • Browser Sync para simplificar testes com vários browsers • https://www.npmjs.com/package/browser-sync
  23. 23. watch() sincronizar(browsers.All) gulp.task('sync', function () { browserSync.init({ proxy: "localhost/Netponto/dist/" }); }); gulp.task('watch', function () { gulp.watch('./app/css/*.css', ['styles']) .on('change', browserSync.reload);; }) gulp.task('deploy', sequence(['styles', 'scripts', 'images'], 'html', 'sync', 'watch'));
  24. 24. browser sync
  25. 25. uglify() + minify() • Utilização para scripts e estilos • https://www.npmjs.com/package/gulp-uglifyjs • https://www.npmjs.com/package/gulp-cssnano
  26. 26. uglify() + minify() gulp.task('prodScripts', function () { return merge(vendorScripts(), appScripts()) .pipe(order(['jquery.js', 'angular.js', 'bootstrap.js', 'controllers.js'])) .pipe(sourcemaps.init()) .pipe(concat('app.js')) .pipe(uglify()) .pipe(sourcemaps.write('maps')) .pipe(gulp.dest(config.dest + 'js')); }); gulp.task('prodStyles', function () { return styles() .pipe(concat('all.css')) .pipe(sourcemaps.init()) .pipe(cssnano()) .pipe(sourcemaps.write('maps')) .pipe(gulp.dest(config.dest + 'css')); });
  27. 27. uglify & minify
  28. 28. deploy(prod) web site • app • css • js • images • bower_components • index.html • dist • webapi web site • app • css • js • images • bower_components • index.html • dist • css • js • images • index.html • webapi
  29. 29. deploy(prod) gulp.task('prodWatch', function () { gulp.watch('./app/css/*.css', ['prodStyles']) .on('change', browserSync.reload);; }) gulp.task('deployProd', sequence(['prodStyles', 'prodScripts', 'images'], 'html', 'sync', 'prodWatch'));
  30. 30. deploy
  31. 31. integrar(visualStudio[2015]) – Visual Studio já permite integração com o gulp através do Task Runer Explorer – Permita atribuir várias tasks do gulp a vários bindings que são executados em condições específicas
  32. 32. Dúvidas?
  33. 33. Referências Site Gulp – http://gulpjs.com/ Site Node Package Manager – https://www.npmjs.com/ Site bower.io – http://bower.io/
  34. 34. Patrocinadores “GOLD” Twitter: @PTMicrosoft http://www.microsoft.com/portugal
  35. 35. Patrocinadores “Silver”
  36. 36. Patrocinadores “Bronze”
  37. 37. http://bit.ly/netponto-aval-59 * Para quem não puder preencher durante a reunião, iremos enviar um email com o link à tarde
  38. 38. Próximas reuniões presenciais 23/01/2016 – Lisboa 20/02/2016 – Braga 27/02/2016 – Lisboa 19/03/2016 – Lisboa 26/03/2016 – Porto Reserva estes dias na agenda! :)
  39. 39. Obrigado! Ricardo Costa https://www.linkedin.com/in/kosta http://blogit.create.pt/ricardocosta ricardo.costa@create.pt

×