• Save
Grunt
Upcoming SlideShare
Loading in...5
×
 

Grunt

on

  • 412 views

Aprenda a utilizar o Grunt

Aprenda a utilizar o Grunt

Statistics

Views

Total Views
412
Views on SlideShare
404
Embed Views
8

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 8

http://www.agilecode.com.br 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Grunt Grunt Presentation Transcript

  • 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 treinamentos na Agile Code • Escrevendo na Java Magazine e PacktPub • Palestrando sobre desenvolvimento de software em eventos, universidades e empresas View slide
  • 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. View slide
  • • 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?
  • 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
  • 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 do workflow do projeto como etapas de validação de código, concatenação, minificação, testes e execução.
  • 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ção anterior.
  • 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
  • Configurando o Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ clean: { dist: ['dist/'] } }); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.registerTask('dist', ['clean']); }
  • Validando os arquivos
  • 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.
  • 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
  • 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']); }
  • Concatenando os arquivos
  • 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.
  • 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
  • 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']); }
  • Minificando
  • 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.
  • 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
  • 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']); }
  • Executando os testes
  • Executando os testes Após todo o processo de montagem da distribuição, podemos executar os testes para verificar se está tudo funcionando.
  • 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
  • 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']); }
  • 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 comando abaixo: npm install grunt-contrib-connect --save-dev
  • 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']); }