Automatização no desenvolvimento Web

com GulpRicardo 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.• 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.

Agenda• gulp()• conceitosBase()• gerir(frameworks)• optimizar(imagens)• injectar(referencias)• deploy(dev)• watch()

• sincronizar(browsers.All)• uglify()• minify()• deploy(prod)• integrar(visualStudio[2015])

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.

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.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'));});

conceitos base

demonstração

ambienteweb 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\

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

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')); });

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'));

});

bower.io

demonstração

optimizar(imagens)• Plugin específico para optimização de imagens• https://www.npmjs.com/package/gulp-imagemin• Diminui o tamanho dos ficheiros de imagens

optimizar(imagens)

gulp.task('images', function () {

return gulp.src('app/img/*').pipe(imagemin()) .pipe(gulp.dest(config.dest + 'img'));

});

imagemin

demonstração

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>

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));});

inject

demonstração

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\

deploy(dev)

gulp.task('deploy', sequence(['styles', 'scripts', 'images'], 'html'));

deploy

demonstração

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

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'));

browser sync

demonstração

uglify() + minify()

• Utilização para scripts e estilos• https://www.npmjs.com/package/gulp-uglifyjs• https://www.npmjs.com/package/gulp-cssnano

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'));

});

uglify & minify

demonstração

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\

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'));

deploy

demonstração

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

Dúvidas?

ReferênciasSite Gulp

– http://gulpjs.com/

Site Node Package Manager– https://www.npmjs.com/

Site bower.io– http://bower.io/

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 presenciais23/01/2016 – Lisboa20/02/2016 – Braga27/02/2016 – Lisboa19/03/2016 – Lisboa26/03/2016 – PortoReserva estes dias na agenda! :)

Obrigado!

Ricardo Costahttps://www.linkedin.com/in/kostahttp://blogit.create.pt/ricardocostaricardo.costa@create.pt