Download - Automatização Desenvolvimento Web com Gulp
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()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'));});
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'));
});
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'));
});
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));});
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'));
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'));
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'));
});
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'));
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/[email protected]