Your SlideShare is downloading. ×
0
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Grunt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Grunt

553

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
553
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']); }

×