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.
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.
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.
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'));
});
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
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));
});
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
Para quem puder ir preenchendo, assim não chateio mais logo
É importante para recebermos nós feedback, e para darmos feedback aos nossos oradores
http://goqr.me/