O documento apresenta uma introdução à automação de tarefas no desenvolvimento web com Gulp. Discute conceitos como streams e funções base do Gulp para copiar, compilar Sass/TypeScript e gerir frameworks. Apresenta plugins para otimizar imagens, injetar referências, sincronizar browsers e minificar/uglify arquivos para produção. Conclui abordando a integração com Visual Studio.

1. Automatização
no desenvolvimento Web
com Gulp
Ricardo Costa
http://netponto.org59ª Reunião Presencial - 23/01/2016

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. Agenda
• gulp()
• conceitosBase()
• gerir(frameworks)
• optimizar(imagens)
• injectar(referencias)
• deploy(dev)
• watch()
• sincronizar(browsers.All)
• uglify()
• minify()
• deploy(prod)
• integrar(visualStudio[2015])

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. conceitosBase()
• 4 funções base
– src
– dest
– task
– watch
• Streams
• Pipe

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. conceitos base

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. 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. 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. 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. bower.io

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. optimizar(imagens)
gulp.task('images', function () {
return gulp.src('app/img/*')
.pipe(imagemin())
.pipe(gulp.dest(config.dest + 'img'));
});

15. imagemin

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. 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. inject

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. deploy(dev)
gulp.task('deploy', sequence(['styles', 'scripts', 'images'], 'html'));

21. deploy

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. 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. browser sync

25. uglify() + minify()
• Utilização para scripts e estilos
• https://www.npmjs.com/package/gulp-uglifyjs
• https://www.npmjs.com/package/gulp-cssnano

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. uglify & minify

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. 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. deploy

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. Dúvidas?

33. Referências
Site Gulp
– http://gulpjs.com/
Site Node Package Manager
– https://www.npmjs.com/
Site bower.io
– http://bower.io/

34. Patrocinadores “GOLD”
Twitter: @PTMicrosoft http://www.microsoft.com/portugal

35. Patrocinadores “Silver”

36. Patrocinadores “Bronze”

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. 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. Obrigado!
Ricardo Costa
https://www.linkedin.com/in/kosta
http://blogit.create.pt/ricardocosta
ricardo.costa@create.pt