Automação de build de front-end com Grunt.js

Ferramentas de build é o que não falta no mercado atual – desde o Maven e o Ant pra Java, o Gradle ou o clássico Make. Mas o Grunt é diferente. Foi feito em JavaScript e com grande foco em automatizar tarefas de front-end.

Se você, por exemplo, for seguir as boas práticas de performance para sites, já deve se preocupar com minificar CSS e JavaScript ou ainda juntar arquivos pra diminuir o número de requests e até fazer CSS sprites. Ou talvez você esteja usando algum pré-processador de CSS como o LESS, SASS ou Stylus.

A questão é: você vai precisar rodar um minificador, um concatenador de arquivos, um pré-processador e provavelmente muitas outras pequenas ferramentas. Rodar tudo isso individualmente é insano e queremos automatizar todo esse processo. É aí que entra o Grunt.js.

O Grunt.js

É uma ferramenta automação de tarefas de build feita totalmente em JavaScript. Ela roda no Node.js, que é um interpretador JavaScript que você pode instalar no seu computador. No final do artigo mostro o processo de instalação pra quando for rodar a primeira vez.

O central no Grunt é um arquivo que descreve as tarefas a serem executadas no build do projeto. E esse mesmo arquivo é escrito em JavaScript, então nada de XML ou sintaxes estranhas como em outras ferramentas. Esse arquivo é o Gruntfile.js que você cria na raiz do seu projeto.

A estrutura básica dele é essa:

module.exports = function(grunt) {
  grunt.initConfig({
     // configurações das tasks
  });

  // carrega plugins
  grunt.loadNpmTasks('nome-do-plugin');
};

Repare que é uma função JS que chama outras configurações. A initConfig é onde vamos colocar as regras das tarefas que queremos executar (onde indicamos, por exemplo, quais arquivos minificar). Repare que ele recebe um objeto JS, como num JSON. No final, chamamos a loadNpmTasks pra registrar um plugin do Grunt que vai trazer alguma funcionalidade.

Minficando JS com Uglify

Vamos configurar a minificação de JavaScript usando o UglifyJS. Registramos o plugin — chamado grunt-contrib-uglify usando grunt.loadNpmTasks('grunt-contrib-uglify');.

A configuração em si é bem simples: basta listar os arquivos a serem minficados (origem e destino):

module.exports = function(grunt) {
  grunt.initConfig({
     uglify: {
        'build/home.js': 'src/home.js',
        'build/main.js': 'src/main.js'   
     }
  });

  // carrega plugins
  grunt.loadNpmTasks('grunt-contrib-uglify');
};

No exemplo, eu supus que você cria seus arquivos numa pasta src/ e quer jogar as versões finais numa pasta build/ (claro que você pode usar outros nomes). Daria também pra minificar o próprio arquivo sem copiá-lo pra uma pasta diferente, mas dificilmente você vai querer minificar seu próprio arquivo fonte.

Por fim, pra executar essa tarefa, basta rodar grunt uglify no terminal.

Pré-processando CSS

Agora é muito fácil adicionar outros plugins e executar outras tarefas. Por exemplo, usando o grunt-contrib-less, podemos compilar um arquivo LESS pra CSS:

less: {
  'build/estilo.css': 'src/estilo.less'
}

Pra rodar, basta executar grunt less no terminal. Pra compilar SASS ou Stylus, é praticamente a mesma coisa, só muda o nome do plugin.

Mais: se quiser concatenar os arquivos CSS num só, além de compilar todos os LESS, dá pra fazer isso listando os arquivos:

less: {
  'build/estilo.css': ['src/header.less', 'src/main.less', 'src/footer.less']
}

Ou usar padrões nos nomes dos arquivos pra ficar mais fácil ainda:

less: {
  'build/estilo.css': ['src/*.less']
}

E isso vale, claro, pras outras tarefas também, como a do uglify que vimos antes. E estamos só vendo o início do Grunt. Dá pra fazer muito mais coisas nessas configurações, pra facilitar tudo mais ainda.

Aliás, um recurso que podemos fazer é simplificar a execução das tarefas pra não precisarmos chamar uma por uma na hora de rodar o comando. Podemos definir novas tarefas com grunt.registerTask(). Passamos o nome da nova task e uma lista de tasks a serem executadas:

grunt.registerTask('default', ['uglify', 'less']);

A nova task default pode ser executada na linha de comando com grunt default e já vai rodar tanto o less quanto o uglify pra gente. Melhor ainda, esse nome default é especial então podemos executar tudo só rodando grunt no terminal.

O código final do exemplo está aqui.

Mais tarefas

Há muitos outros plugins úteis no grunt. Pra compiladores de CSS, temos o LESS, Stylus e SASS. Pra JS, temos também CoffeeScript. Pra minificar, temos o uglify, o cssmin e o htmlmin. Temos ainda tarefas básicas como copiar arquivos (copy), concatenação simples (concat) e clean. E ainda o watch com livereload para seu navegador atualizar automaticamente quando um arquivo for mudado.

Isso só falando de alguns dos plugins oficiais. Há uma lista imensa de plugins da comunidade pra fazer as mais variadas tarefas. Como o poderoso grunticon que gera uma sprite de arquivos SVG com fallback para PNGs.

A instalação do Grunt.js

O Grunt é baseado no Node.js então você deve primeiro instalá-lo. No site já há um botão de download logo de cara ou você pode usar o instalador de pacotes do seu sistema operacional (apt-get no Linux, homebrew no Mac etc).

Depois que você instalou o Node, pode instalar as ferramentas de linha de comando do Grunt apenas executando no terminal: npm install -g grunt-cli

Próximo passo é configurar nosso projeto como um artefato do node para que possamos instalar os plugins e outras dependências. É bem fácil. Crie um arquivo package.json na raiz do seu projeto onde colocaremos configurações do projeto — o mínimo é o nome do projeto e um número de versão:

{
  "name": "grunt-demo",
  "version": "0.0.1"
}

Agora, a instalação do Grunt é feita de acordo com o projeto fazendo: npm install grunt --save-dev.

Cada plugin do grunt que você for usar, vai instalar da mesma forma:

npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-less --save-dev

Aí é só usar esses plugins no seu Gruntfile.js como vimos antes.

Mais

Vimos uma introdução do grunt, suas ideias e alguns poucos recursos. O site oficial deles tem muito mais documentação. Em português, há os excelentes artigos do Zeno Rocha e do Felipe Fialho.

O Grunt é uma ferramenta poderosa para automatizar tarefas de build. Tem bastante foco em tarefas de front-end, mas pode ser usado pra todo tipo de build. Aqui na Caelum mesmo, usamos para buildar a parte front-end de um projeto maior com Java no backend.

Estude online na Alura

Programação, Mobile, Front-end, Design & UX, Infraestrutura e Business