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

Grunt

on

  • 304 views

Aprenda a utilizar o Grunt

Aprenda a utilizar o Grunt

Statistics

Views

Total Views
304
Views on SlideShare
298
Embed Views
6

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 6

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

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