Automatizando processos de frontend e deploy usando Gulp

Apresentado no Café com Dev em Londrina dia 26/09/2014 por Thiago Borges

Transcript

1. Automatizando processos de frontend e deploy usando Gulp Thiago Borges
2. ! Desenvolvedor ~4 anos Ruby, Python, iOS @tgabrielborges http://thiagoborg.es/ Thiago Borges
3. Problemas de frontend
4. • Cada nova requisição no browser leva no mínimo 20ms, mas pode levar 100ms ou mais Carregamento da página
6. Cada um tem seu padrão
7. Tarefas repetitivas
8. Gulp "The streaming build system"
9. Como usar Gulp
10. Começando 1. $ npm install --global gulp 2. $ npm init 3. $ npm install --save-dev gulp 4. Criar o arquivo gulpfile.js 5. Executar $ gulp
11. Fluxo Básico
12. Executar uma task gulp.task('mytask', function() { // Faz algo aqui })
13. Executar várias tasks gulp.task('mytask',['array', 'of', 'task'], function() { // Faz algo aqui })
14. Otimizando o carregamento da página • Concat • Minify • Ugligy • Resize e otimização de imagens
15. Exemplo
16. Código mais limpo • SASS/LESS • CoffeeScript • Autoprefixer
17. Exemplo
18. Padrões ! • Executam a Análise do código baseado em um guideline • gulp-jshint • gulp-coffeelint • gulp-scss-lint • gulp-csslint
19. Exemplo
20. Deploy
21. Exemplo
22. http://gulpjs.com/
24. Alternativas • Grunt.js • Brocolli • CodeKit
25. Obrigado
26. Links • https://ninefold.com/blog/2014/07/01/rails-and- the-warped-asset-pipeline/ • http://browserdiet.com/pt/ • https://developer.yahoo.com/performance/ rules.html • http://guides.rubyonrails.org/asset_pipeline.html • http://www.jshint.com/docs/options/