Automação de build para frontend

975 visualizações

Publicada em

Apresentação feita no 2º Encontro Nacional de Mulheres na Tecnologia

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
975
No SlideShare
0
A partir de incorporações
0
Número de incorporações
12
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Automação de build para frontend

  1. 1. Automação de build para frontend vanessa me tonini
  2. 2. eu sou... ● Desenvolvedora Web desde 2007 ● Tecnóloga em sistemas para Internet pela UNIVALI ● Especialista em desenvolvimento Web pela UTFPR ● Hoje trabalho em projetos de fomento a acessibilidade Web e Open Web no W3C Brasil
  3. 3. automação Automação é a aplicação de técnicas computadorizadas ou mecânicas para diminuir o uso de mão-de-obra em qualquer processo, especialmente o uso de robôs nas linhas de produção. Lacombe (2004)
  4. 4. automação para o desenvolvimento de softwares É o processo de escrita de um programa de computador para executar uma série de tarefas automaticamente. Estas tarefas servem desde para garantia do funcionamento como para perfomance de um software.
  5. 5. performance para frontend Desde o surgimento do HTML5, construir aplicações Web ficou mais complexo. A complexidade não está só nas linguagens, que evoluiram muito nos últimos anos. Mas também na diversidade de dispositivos para acessar a Internet, que aumentaram rapidamente.
  6. 6. build de frontend O build é a versão final compilada de um software. No caso do frontend é o pacote de código fonte já testado e otimizado.
  7. 7. Tasks para construção do build ● Testes de JS (unit & e2e) ● CSS pré processado ● Gerenciamento de Sprites (imagens do CSS) ● Concatenação e minização dos arquivos JS e CSS
  8. 8. Tasks para construção do build ● Output de template engines ● Minimização de imagens ● Minimização de html ● Validação de código (w3c, lint …) entre outras...
  9. 9. Ferramentas task runner tools
  10. 10. GRUNT JS npm + Node.js
  11. 11. GRUNT JS: instalação sudo npm install -g grunt-cli
  12. 12. GRUNT JS: preparando seu projeto package.json Gruntfile.js
  13. 13. GRUNT JS: package.json { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } }
  14. 14. GRUNT JS: Gruntfile.js module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); };
  15. 15. exemplos
  16. 16. referências ● http://www.targettrust.com.br/blog/o-que-e-automacao-de-teste-de- software/ ● http://pt.wikipedia.org/wiki/Automa%C3%A7%C3%A3o ● http://pt.wikipedia.org/wiki/Build ● http://www.infoq.com/br/presentationt-end-ops ● http://www.voltsdigital.com.br/labs/gruntjs-por-onde-comecar/ ● http://www.nomensa.com/blog/2014/an-introduction-to-automating- front-end-build-processes-using-grunt/ ● http://gruntjs.com/
  17. 17. @vanessametonini obrigada!

×