Concrete Logo
Hamburger button

Correndo com Grunt Task Runner Javascript

  • Blog
  • 22 de Setembro de 2014
Share

Muitas vezes, no nosso dia a dia de desenvolvedores, executamos uma série de tarefas repetidamente. Isso torna nosso trabalho muito chato. Por isso, algumas dessas vezes tentamos pensar em alguma forma de diminuir esse processo trabalhoso, que consome tempo, e acabamos automatizando nossas tarefas. Devemos entender que automatizar tarefas é importante, e é para isso que o Grunt foi feito.

Automatizar tarefas nos transforma de um “Programador Hardcore”:code-hard.gif

Para um “Programador Poderoso”:

power.gif

Mas o que é o Grunt? O Grunt é um task runner desenvolvido totalmente em javascript, ou seja, é um build script em javascript. Ele não é o único. Existem outros task runners no mercado, como Make (Shell), Rake (Ruby), Ant (Java), e alguns outros mais. Mas hoje, especificamente, vou falar de Grunt e como dar os primeiros passos.

O Grunt, como disse acima, foi feito em javascript, e sua base é NodeJS e npm, ou seja, precisamos ter esses dois caras instalado no nosso sistema. Para quem não conhece nenhum dos dois, acesse links de referência. Sem a instalação deles, nosso Grunt não irá rodar.

Depois do NodeJS e npm instalado, vamos instalar o Grunt com esse comando:

Esse comando irá instalar o Grunt globalmente no sistema. Depois disso, vamos ter somente o comando “grunt” para brincar à vontade, o grunt task runner ainda não estará no seu projeto.

Presumindo que temos nosso grunt-cli instalado, agora o que nos resta é criar nosso projeto. O grunt necessita apenas de dois arquivos básicos de configuração no diretório raiz do seu projeto, que são:

  • Gruntfile.js: arquivo javascript que irá carregar todas as nossas tarefas.

  • package.json: arquivo json que contém metadados relevantes do projeto.

Primeiros vamos criar nosso package.json. Podemos iniciar a configuração criando o arquivo package.json e seguindo a estrutura do exemplo mostrado logo a seguir, ou executando o seguinte comando no nosso terminal e seguir os passos sugeridos:

No package.json como descrito acima, teremos metadados do projeto e é lá que armazenamos todas as suas dependências, inclusive as do nosso grunt. Depois, quando você quiser baixar todas essas dependências, é só executar.

Bom, aqui está um pequeno exemplo de uma estrutura de um package.json junto com as dependências do grunt:

No exemplo, adicionei algumas dependências do grunt no package.json. Uma das grandes vantagens que o grunt tem é que existe uma série de plugins prontos para você usar. No próprio site do grunt há uma lista deles junto com sua documentação de uso, é só acessar https://gruntjs.com/plugins e se divertir. Importante saber que todo plugin que você quiser instalar no grunt sempre será instalado da seguinte forma (exemplo para instalar uglify):

Feito nosso package.json, vamos agora criar o Gruntfile.js e escrever nossas tasks:

Para entender melhor o que foi feito acima, vou explicar:

Dentro da função initConfig(), foi passado um objeto cheio de tarefas para o grunt, como o ‘concat’, que serve para concatenar nossos arquivos javascript, o ‘uglify’ que servirá para minimizar nossos arquivos, o ‘qunit’, que executará os testes e, por último mas não menos importante, o ‘jhint’, que fará a validação do código javascript.

Carregamos nossos plugins com loadNpmTasks() e, em seguida, registramos as tarefas no registerTask(). Note que registramos dois tipos de tasks diferentes: a ‘default’ e a ‘test’, que nos servirá de separação de tasks a serem executadas, caso queiramos um ambiente de developer e um de production por exemplo.

Nenhum arquivo javascript ou html foi criado aqui para rodar os exemplos configurados no Gruntfile, mas você poderá criá-los sem problemas para continuar a brincadeira.

Pronto! Agora temos nosso Gruntfile configurado. Para colocar nosso task runner para funcionar é muito simples: execute o comando ‘grunt’, que executará a task ‘default’ ou ‘grunt test’, que executará a task ‘test’ e voilá…

Grandes empresas como Twitter, jQuery, Adobe e Modernizr estão contando com Grunt em seu Workflow e essa com certeza é uma ferramenta que veio para ajudar e facilitar nossa vida como desenvolvedor. Basta explorar, brincar e tirar o máximo de proveito.

Dúvidas, comentários ou sugestões de como usar o Grunt, só deixar nos campos abaixo. E se você quiser saber mais, pode entrar no site do Grunt. Lá tem um “getting startted”.

Divirtam-se, e até a próxima!