Aprenda a utilizar o Grunt

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

15. Validando os arquivos

16. 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.

17. 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

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

20. Concatenando os arquivos

21. 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.

22. 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

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

25. Minificando

26. 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.

27. 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

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

30. Executando os testes

31. Executando os testes
Após todo o processo de montagem da
distribuição, podemos executar os testes
para verificar se está tudo funcionando.

32. 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

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

34. Rodando o projeto

35. Rodando o projeto
Chegou a hora de ver o resultado do nosso
trabalho! Vamos rodar o projeto em um
servidor web.

36. 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

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