z

Automatizando tarefas JS com Grunt

Você já parou pra pensar na quantidade de coisas que realiza repetidamente em seus projetos JavaScript?

Se você for um cara preocupado com a consistência do seu código talvez utiliza várias vezes ao dia o JSHint/JSLint. Quem sabe você também se preocupa com a qualidade da sua aplicação e provavelmente utiliza o QUnit para realizar testes unitários. Isso sem falar de performance, talvez você minifique e concatene seus arquivos com frequência antes de sair jogando eles online.

Durante o Rio.js Meetup desse último final de semana, o Leo Balter (@leobalter) nos apresentou uma ferramenta que vem justamente para ajudar nesse processo e hoje vim aqui compartilhar com vocês também.

O que é?

Criado pelo Ben Alman (@cowboy), o Grunt é uma ferramenta beta que você roda no terminal para automatizar tarefas (obs: se você não tem intimidade com o terminal, aproveite essa chance para se aventurar nele, não é o bicho de 7 cabeças que parece ser).

Instalando

Para começar a brincar você precisa ter o node.js e o npm (gerenciador de pacotes do node) instalados na sua máquina (não vou lhe mostrar como instalar isso, joga no Google que você encontra milhões de tutoriais).

Depois basta instalar o grunt via npm:

npm install -g grunt

Agora temos tudo pronto para executar.

Iniciando

Para dar os primeiros passos, vamos utilizar um comando que cria um scaffolding a partir de determinado template.

grunt init:TEMPLATE

Até o momento, existem 3 opções de template:

  1. CommonJS (veja aqui um exemplo de projeto criado com ele):
grunt init:commonjs
  1. jQuery (veja aqui um exemplo de projeto criado com ele):
grunt init:jquery
  1. Node (veja aqui um exemplo de projeto criado com ele):
grunt init:node

Mais detalhes sobre esse comando aqui

Minificação

O processo de minificação é feito utilizando o UglifyJS, basta rodar:

grunt min

Mais detalhes sobre esse comando aqui

Concatenação

Para concatenar seus arquivos JS, basta rodar:

grunt concat

Mais detalhes sobre esse comando aqui

Lint

Para validar seu código através da ferramenta JSLint, basta rodar:

grunt lint

Mais detalhes sobre esse comando aqui

QUnit

Para executar seus testes unitários com QUnit, utilizando uma instância do PhantomJS, basta rodar:

grunt qunit

Mais detalhes sobre esse comando aqui

NodeUnit

Para executar seus testes unitários com nodeunit, basta rodar:

grunt test

Mais detalhes sobre esse comando aqui

Servidor

Você também pode executar um servidor estático localmente, basta rodar:

grunt server

Mais detalhes sobre esse comando aqui

Concluindo

E é isso, espero que essa ferramenta lhe traga mais agilidade em seus projetos e te ajude, assim como tem me ajudado. Até a próxima!

Leia mais