Your SlideShare is downloading. ×

Grunt

491

Published on

Aprenda a utilizar o Grunt

Aprenda a utilizar o Grunt

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
491
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
  • 2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
  • 3. Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • Desenvolvendo Software na Gennera • Criando treinamentos na Agile Code • Escrevendo na Java Magazine e PacktPub • Palestrando sobre desenvolvimento de software em eventos, universidades e empresas
  • 4. Certificações Formação Acadêmica Ciências da Computação – UFSC Gerenciamento de Projetos - FGV SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM Experiência Há mais de 12 anos desenvolvendo software na plataforma Java com as empresas: EDS, HP, NET, Citibank, GM, Dígitro, Softplan, OnCast, Senai, VALE, RBS, Unimed, Globalcode, V.Office, Suntech, WPlex e Gennera.
  • 5. • Há mais de 5 anos liderando pessoas. • Mais de 2000 horas em sala de aula. • Mais de 100 apresentações em eventos. • 6 artigos escritos para revistas. • 1 livro. • Mais de 500 profissionais treinados. • Criação de 22 palestras. • Criação de 10 treinamentos. • Criação de mais de 3.000 slides. O que realmente me motiva?
  • 6. Grunt O Grunt é um automatizador de tarefas para JavaScript. Ele roda sobre o Node.js e é baseado em uma arquitetura de plugins que permitem estender suas funcionalidades. http://gruntjs.com
  • 7. Processo de Instalação Para instalar a ferramenta, basta digitar o comando abaixo: npm install grunt
  • 8. Configuração O Grunt é configurado por meio do arquivo Gruntfile.js. Nele será especificado cada detalhe do funcionamento do workflow do projeto como etapas de validação de código, concatenação, minificação, testes e execução.
  • 9. Criando uma distribuição
  • 10. Limpando os arquivos temporários da distribuição
  • 11. Limpando a distribuição Antes de criar uma nova distribuição, é importante limpar qualquer arquivo gerado pela distribuição anterior.
  • 12. Instalando o plugin Para efetuar o processo de limpezar vamos utilizar o plugin grunt-contrib-clean. Para instalar, basta digitar o comando abaixo: npm install grunt-contrib-clean --save-dev
  • 13. Configurando o Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ clean: { dist: ['dist/'] } }); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.registerTask('dist', ['clean']); }
  • 14. Validando os arquivos
  • 15. Validando os arquivos Como o JavaScript é uma linguagem interpretada, não temos um processo de compilação para garantir que o código é válido e está de acordo com a especificação da linguagem.
  • 16. Instalando o plugin Para efetuar o processo de validação vamos utilizar o plugin grunt-contrib-jshint. Para instalar, basta digitar o comando abaixo: npm install grunt-contrib-jshint --save-dev
  • 17. Configurando o Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true, sub: true, undef: false, unused: true, boss: true, eqnull: true, browser: true } }, all : ['Gruntfile.js','js/**/*.js', 'test/**/*.js'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('dist', ['clean', 'jshint']); }
  • 18. Concatenando os arquivos
  • 19. Concatenando os arquivos Em produção, quanto menos arquivos precisarem ser carregados pela aplicação melhor. Fora isso, processos como o de minificação são bem mais eficientes se aplicados a um arquivo único.
  • 20. Instalando o plugin Para efetuar o processo de concatenação vamos utilizar o plugin grunt-contrib-concat. Para instalar, basta digitar o comando abaixo: npm install grunt-contrib-concat --save-dev
  • 21. Configurando o Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ concat: { dist: { src: [js/**/*.js'], dest: 'dist/js/script.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('dist', ['clean', 'jshint', concat']); }
  • 22. Minificando
  • 23. Minificando os arquivos Em aplicações JavaScript precisamos nos preocupar bastante não só com a questão da performance, reduzindo o tamanho dos arquivos, mas também com a própria segurança do código fonte.
  • 24. Instalando o plugin Para efetuar o processo de minificação vamos utilizar o plugin grunt-contrib-uglify. Para instalar, basta digitar o comando abaixo: npm install grunt-contrib-uglify--save-dev
  • 25. Configurando o Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ uglify: { dist: { src: [dist/js/script.js'], dest: 'dist/js/scrip.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('dist', ['clean', 'jshint', concat', 'uglify']); }
  • 26. Executando os testes
  • 27. Executando os testes Após todo o processo de montagem da distribuição, podemos executar os testes para verificar se está tudo funcionando.
  • 28. Instalando o plugin Para executar os testes dentro do workflow, vamos utilizar o plugin grunt-karma. Para instalar, basta digitar o comando abaixo: npm install grunt-karma --save-dev
  • 29. Configurando o Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ karma: { unit: { configFile: 'karma.conf.js' } } }); grunt.loadNpmTasks('grunt-karma'); grunt.registerTask('dist', ['clean', 'jshint', concat', 'uglify', 'karma']); }
  • 30. Rodando o projeto
  • 31. Rodando o projeto Chegou a hora de ver o resultado do nosso trabalho! Vamos rodar o projeto em um servidor web.
  • 32. Instalando o plugin Para rodar o projeto vamos utilizar o plugin grunt-contrib-connect. Para instalar, basta digitar o comando abaixo: npm install grunt-contrib-connect --save-dev
  • 33. Configurando o Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ connect: { dist: { options: { port: 9000, hostname: 'localhost', base: 'dist/' } } } }); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.registerTask('dist', ['clean','jshint', concat', 'uglify', 'karma','connect:dist:keepalive']); }

×