Rapidez no seu fluxo de trabalho com Grunt.js

grunt1-510x269

Este tutorial é para quem já tem conhecimento prévio sobre node.js e vou utilizar como exemplo o projeto padrão do zurb foundation  no ambiente Windows.

Vamos lá, vantagens de usar o Grunt:

* Apaga todos os comentários e “logs” dos seus js;
* Minifica, concatena todos os seus css e js;
* Otimiza imagens;
* Torna sua produção em livereload, onde a cada alteração no arquivo já atualiza no navegador automaticamente;
* Cria projetos padrões para criação de plugins para JQuery, seu próprio plugin e etc;

Vamos instalá-lo (necessário node instalado), abra o terminal ou o bash do git no modo admin (eu prefiro usar o bash do git, pois mesmo no windows posso usar os comandos do linux)

npm install -g grunt-cli

Com isto é possível você criar um projeto onde o grunt pode realizar as tarefas que vai criar. Além disto, é necessário em seu projeto dois arquivos:

* Gruntfile.js : terá toda configuração das tarefas que serão executas e quais plugins são necessários;
* package.json : é a especificação do seu projeto, como versão, autor, dependedências e etc;

Vamos instalar uma lib que permite instalar templates.

npm install -g grunt-init

Agora é possível você usar os templates para construir seus projetos. Eles são configurações padronizadas que agilizam o início do seu desenvolvimento, em suma, um scaffolding (http://gruntjs.com/project-scaffolding).

Ex:
git clone git@github.com:gruntjs/grunt-init-commonjs.git ~/.grunt-init/commonjs

Se acontecer alguma problema de “Permission denied (publickey)” é por que sua chave pública SSH o github não a reconhece, neste caso você deve criar uma nova chave (https://help.github.com/articles/generating-ssh-keys) e em seguida coloca-lá nas suas configurações do git(https://github.com/settings/ssh).

Agora vamos configurar nossa app.

Estamos na pasta do exemplo, e criaremos um Gruntfile básico, mas antes precisamos fazer o download do seu template.

1
Diretório do exemplo

git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

Após instalado, podemos configurar:

grunt-init gruntfile

2

3

Será criado o arquivo Gruntfile.js, nele consta várias tarefas separadas por variáveis. Vamos abrir o arquivo e acompanhar:

banner: server para montar um comentário especial em seus arquivos informando a versão, a data da última versão, nome do autor, licensa e etc. Ela depende do arquivo package.json que contém as informações do seu projeto;

concat (concatenar js e css),  uglify (minificar js), jshint (corrigir erros de sintaxe), qunit (testes de js), watch (servidor que “assiste” as alterações nos arquivos): São variáveis que contém os paramêtros para realizar as tarefas;

grunt.loadNpmTasks(‘grunt-contrib-******’): Carrega os plugins necessários para as tarefas serem realizadas;

grunt.registerTask(‘default’, [‘jshint’, ‘qunit’, ‘concat’, ‘uglify’]): Registra as tarefas que serão executadas na ordem especificadas no array;

Neste template (gruntfile), ele traz a configuração padrão acima, entretanto ela nos servirá de base e vamos alterá-la pois usaremos 2 libs: concat, uglify e  acrescentaremos o cssmin.

Em seguida é necessário instalar os plugins que farão todo o serviço pesado pra gente, como minificar, concatenar e salvar em uma pasta separada. Os plugins serão executados dependendo do modo como configurar o Gruntfile(http://gruntjs.com/sample-gruntfile). O “–save-dev” significa que serão instalados os plugins também no seu projeto localmente em uma pasta chamada “node_modules”.

Ex:
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-qunit --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-contrib-cssmin --save-dev

Os plugins acima são os principais do Grunt. Mas vamos instalar somente o que queremos:

npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-cssmin --save-dev

4

Ele criará uma pasta node_modules e incluir os plugins que instalamos:

5

Vamos limpar nosso Gruntfile.js colocando somente as tarefas que vamos usar, como na imagem abaixo (download do código):

7

Vamos explicar cada parte:

1. Criamos algumas variáveis indicando as pastas do fonte do JS , CSS e onde queremos que as alterações sejam salvas, na pasta dist (a pasta é criada);

2. Indica duas tarefas: js-> vai pegar todos os arquivos *.js e concatená-los em seguida serão salvos no destino (dist/grunt-test.js). O mesmo ocorre com a tarefa css, a diferença é que indiquei a ordem e especifiquei os arquivos para serem concatenados. Quando você não especifica os arquivos são concatenados por ordem alfabética, assim é sempre bom especificar a ordem no array;

3. No uglify indica a tarefa de minificar js que já concatenamos (já se encontra na pasta dist). 3.1 é a origem do arquivo e o 3.2 é o resultado e onde será salvo (dist/grunt-test.min.js). O mesmo ocorre para cssmin;

Pronto, Gruntfile Ok. Vamos criar o package.json.

npm init

5 4

Percebemos que o package já reconhece as libs que estamos usando e já acrescentam-nas no arquivo padrão.

Pronto! Vamos minificar e concatenar!

grunt

8

9

Podemos perceber que criou os arquivos na pasta dist, com o nome do projeto e minificados =D … só com um comando!

O Grunt tem vários outros plugins que podem te ajudar na otimização de imagem, compilação de LESS e SASS, e etc.

Também tem esse ótimo artigo sobre o assunto: http://blog.caelum.com.br/automacao-de-build-de-front-end-com-grunt-js/

Qualquer dúvida, é só comentar. =]

2 Comments

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s