Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
“Transformar equipes de desenvolvimento de software”
http://www.agilecode.com.br
Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
• Desenvolvendo Software na Gennera
• Criando t...
Certificações
Formação Acadêmica
Ciências da Computação – UFSC
Gerenciamento de Projetos - FGV
SCJA, SCJP, SCJD, SCWCD, SC...
• Há mais de 5 anos liderando pessoas.
• Mais de 2000 horas em sala de aula.
• Mais de 100 apresentações em eventos.
• 6 a...
Grunt
O Grunt é um automatizador de tarefas
para JavaScript. Ele roda sobre o Node.js e
é baseado em uma arquitetura de pl...
Processo de Instalação
Para instalar a ferramenta, basta digitar o
comando abaixo:
npm install grunt
Configuração
O Grunt é configurado por meio do arquivo
Gruntfile.js. Nele será especificado cada detalhe
do funcionamento ...
Criando uma distribuição
Limpando os arquivos
temporários da distribuição
Limpando a distribuição
Antes de criar uma nova distribuição, é
importante limpar qualquer arquivo gerado
pela distribuiçã...
Instalando o plugin
Para efetuar o processo de limpezar vamos
utilizar o plugin grunt-contrib-clean. Para
instalar, basta ...
Configurando o Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
clean: {
dist: ['dist/']
}
});
grunt.lo...
Validando os arquivos
Validando os arquivos
Como o JavaScript é uma linguagem
interpretada, não temos um processo de
compilação para garantir qu...
Instalando o plugin
Para efetuar o processo de validação vamos
utilizar o plugin grunt-contrib-jshint. Para
instalar, bast...
Configurando o Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
jshint: {
options: { curly: true, eqeqe...
Concatenando os arquivos
Concatenando os arquivos
Em produção, quanto menos arquivos
precisarem ser carregados pela aplicação
melhor. Fora isso, pr...
Instalando o plugin
Para efetuar o processo de concatenação
vamos utilizar o plugin grunt-contrib-concat.
Para instalar, b...
Configurando o Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
concat: {
dist: {
src: [js/**/*.js'],
d...
Minificando
Minificando os arquivos
Em aplicações JavaScript precisamos nos
preocupar bastante não só com a questão
da performance, re...
Instalando o plugin
Para efetuar o processo de minificação
vamos utilizar o plugin grunt-contrib-uglify.
Para instalar, ba...
Configurando o Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
uglify: {
dist: {
src: [dist/js/script....
Executando os testes
Executando os testes
Após todo o processo de montagem da
distribuição, podemos executar os testes
para verificar se está t...
Instalando o plugin
Para executar os testes dentro do workflow,
vamos utilizar o plugin grunt-karma. Para
instalar, basta ...
Configurando o Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
karma: {
unit: {
configFile: 'karma.con...
Rodando o projeto
Rodando o projeto
Chegou a hora de ver o resultado do nosso
trabalho! Vamos rodar o projeto em um
servidor web.
Instalando o plugin
Para rodar o projeto vamos utilizar o plugin
grunt-contrib-connect. Para instalar, basta
digitar o com...
Configurando o Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
connect: {
dist: {
options: {
port: 900...
Grunt
Grunt
Grunt
Grunt
Grunt
Upcoming SlideShare
Loading in...5
×

Grunt

636

Published on

Aprenda a utilizar o Grunt

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

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

No notes for slide

Grunt

  1. 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
  2. 2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
  3. 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. 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. 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. 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. 7. Processo de Instalação Para instalar a ferramenta, basta digitar o comando abaixo: npm install grunt
  8. 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. 9. Criando uma distribuição
  10. 10. Limpando os arquivos temporários da distribuição
  11. 11. Limpando a distribuição Antes de criar uma nova distribuição, é importante limpar qualquer arquivo gerado pela distribuição anterior.
  12. 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. 13. Configurando o Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ clean: { dist: ['dist/'] } }); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.registerTask('dist', ['clean']); }
  14. 14. Validando os arquivos
  15. 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. 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. 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. 18. Concatenando os arquivos
  19. 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. 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. 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. 22. Minificando
  23. 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. 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. 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. 26. Executando os testes
  27. 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. 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. 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. 30. Rodando o projeto
  31. 31. Rodando o projeto Chegou a hora de ver o resultado do nosso trabalho! Vamos rodar o projeto em um servidor web.
  32. 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. 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']); }

×