Grunt: build tool para projetos front-end

Conheça o Grunt, um dos melhores executadores de tarefas (task runner), e veja exemplos de uso para que o processo de automatização de tarefas no front-end em seus projetos seja uma realidade!

Ir para o artigo

A maioria dos desenvolvedores front-end já utilizam algum tipo de processo de construção para em seus projetos, mesmo sem saber – ou não usar o termo “processo de construção” para isso. Eles concatenam arquivos para a produção; fazem o minify do código JavaScript para acelerar o carregamento da página e convertem arquivos LESS ou SASS em arquivos CSS. Grunt ajuda a gerenciar todas essas etapas em um único local e a orquestrar componentes de terceiros.

Por que outra ferramenta de construção (build tool)?

Todas as soluções já existentes tiveram suas raízes em diferentes áreas da programação. Como elas não foram idealizadas/construídas, principalmente, para o desenvolvimento front-end, todos têm seus próprios “caprichos” e obstáculos. Algumas envolvem o conhecimento de outras linguagens (Make, Rake) ou usar dialetos XML individuais (Ant, Maven), que têm de ser aprendidos antes e não são fáceis de personalizar.

Então, por que não ter uma ferramenta explicitamente construída para o fluxo de trabalho web escrita numa linguagem que desenvolvedores front-end trabalham no dia-a-dia, tornando mais fácil modificar e aprimorar esta ferramenta para as necessidades particulares de cada projeto? Grunt é inteiramente escrito em JavaScript e roda com Node.js – o que significa que pode ser usado em várias plataformas!

Olá, Grunt!

Grunt já está aí há algum tempo, mas sofreu algumas mudanças importantes na versão 0.4. Agora, Grunt consiste num pequeno cliente em linha de comando e um executador de tarefas (ou task runner). Toda a funcionalidade adicional é baseada em plugins para que seja possível configurá-lo segundo as necessidades específicas dos projetos.

Grunt e todas suas dependências são empacotados dentro do diretório de projeto para se certificar de que tudo o que seja preciso construir e enviar, o projeto sempre permanece no lugar. E se você verificar nas configuração em seus repositórios Subversion ou Git, tudo pode ser configurado muito rapidamente.

Mesmo o Grunt ainda estando num estágio inicial, já há uma abundância de plugins para (quase) todas as necessidades de desenvolvimento.

Minificação (minification) de JavaScript e CSS, integração de pré-processadores de CSS e JavaScript como SASS/Compass, LESS e Stylus, CoffeeScript ou LiveScript, otimização de tamanho de arquivos PNG e JPEG e criação automática de sprites.

Se você planeja escrever aplicações web maiores, Grunt também integra otimizações com Require.js e Google Closure Compiler e permite que você pré-compile templates para Handlebars, Jade, Underscore, Mustache, Eco e Hogan. Também já existem plugins para os frameworks de teste mais comuns, como Jasmine, Mocha, QUnit, e Cucumber.

Todos os plugins disponíveis estão disponíveis no site do Grunt (e se alguém publica um módulo Node.js novo com a palavra-chave “gruntplugin”, ele é automaticamente adicionado à lista).

Então, como você pode ver, Grunt não só ajuda a construir o projeto, mas, também, serve como hub central de configuração de ferramentas externas.

Como instalar Grunt e primeiros passos

Agora que você já tem uma primeira impressão sobre o que é o Grunt, é hora de começar. Primeiro de tudo, é preciso ter certeza de que o Node.js está instalado em seu sistema. Há instaladores disponíveis para várias plataformas, que permitem que você comece rapidamente. Abra um terminal e digite npm install grunt-cli -g para instalar a ferramenta de linha de comando do Grunt.

Versões mais antigas do Grunt vinham com um conjunto de tarefas essenciais predefinidas. A fim de ser mais flexível e personalizável, elas foram removidas na versão 0.4, mas podem ser instaladas como plugins de tarefas individuais, que deixam por sua conta um pouco mais de trabalho de configuração.

Primeiro, crie um arquivo na pasta raiz do seu projeto chamado package.json. Se você está familiarizado com Node.js, você já deve estar familiarizado com este arquivo, mas vamos a um exemplo mais básico.

{
    "name": "my-project-name",
    "version": "0.1.0",
    "devDependencies": {
        "grunt": "~0.4.0",
        "grunt-contrib-jshint": "~0.1.0",
        "grunt-contrib-concat": "~0.1.1",
        "grunt-contrib-uglify": "~0.1.0",
        "grunt-contrib-watch": "~0.1.4"
    }
}

{

"name": "my-project-name",

"version": "0.1.0",

"devDependencies": {

"grunt": "~0.4.0",

"grunt-contrib-jshint": "~0.1.0",

"grunt-contrib-concat": "~0.1.1",

"grunt-contrib-uglify": "~0.1.0",

"grunt-contrib-watch": "~0.1.4"

}

Além do nome e da versão do projeto, no arquivo consta a lista de dependências necessárias para o desenvolvimento. Neste exemplo, a instalação do Grunt está sendo feita com algumas das tarefas mais básicas. Abra o Terminal (ou Prompt de comando do Windows…), mude para o diretório do projeto e digite npm install.

Após o Grunt e todas as dependências necessárias para o projeto estarem instalados, é hora de começar com a configuração do Grunt, em si. Para tanto, adicione um arquivo chamado Gruntfile.js na raiz do projeto, ao lado do arquivo package.json criado anteriormente.

Um arquivo de configuração básica é, mais ou menos, assim:

module.exports = function(grunt) {

    // Inicializa as tarefas do Grunt com as configurações que seguem
    grunt.initConfig({
        // Uma lista de arquivos que terão sua sintaxe checada com JSHint
        jshint: { … },

        // Arquivos que serão concatenados (arquivos de origem e de destino)
        concat: { … },

        // Arquivos que serão minificados (arquivos de origem e de destino)
        uglify: { … },

        // Tarefas que serão executadas com 'grunt watch'
        watch: { … }
    });

    // Carrega os plugins que proveem as tarefas especificadas no package.json.
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Tarefa padrão que será executada se o Grunt
    // for chamado sem parâmetros.
    grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

};

module.exports = function(grunt) {

// Inicializa as tarefas do Grunt com as configurações que seguem

grunt.initConfig({

// Uma lista de arquivos que terão sua sintaxe checada com JSHint

jshint: { … },

// Arquivos que serão concatenados (arquivos de origem e de destino)

concat: { … },

// Arquivos que serão minificados (arquivos de origem e de destino)

uglify: { … },

// Tarefas que serão executadas com 'grunt watch'

watch: { … }

});

// Carrega os plugins que proveem as tarefas especificadas no package.json.

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-watch');

// Tarefa padrão que será executada se o Grunt

// for chamado sem parâmetros.

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

};

Então, como pode ser visto, toda a configuração necessária é escrita, puramente, em JavaScript. Basicamente, você precisa de três diferentes funções para trabalhar com Grunt: grunt.initConfig, grunt.loadNpmTasks e grunt.registerTask.

A primeira define todas as opções e parâmetros para todas as tarefas que você pretende usar; as tarefas em si são carregados com grunt.loadNpmTasks.

Cada tarefa pode ser chamada separadamente a partir da linha de comando, passando seu nome como parâmetro. Por exemplo, grunt jshint seria apenas para executar a tarefa de linting do projeto. Com grunt.registerTask, você define uma tarefa-padrão para ser executada quando o Grunt é chamado sem nenhum parâmetro. Ele executa as tarefas listadas na ordem dada; no caso, jshint, concat e uglify.

Exemplos de tarefas Grunt

Para facilitar o entendimento e fixação, veja alguns exemplos de tarefas Grunt.

Checando o JavaScript com JSHint

é uma ferramenta para detectar erros e possíveis problemas em seu código JavaScript, por exemplo, o ajuste apropriado de ponto-e-vírgula e chamadas de funções ou chaves não fechadas apropriadamente. Ele também ajuda a identificar erros de digitação, o que poderia demorar muito mais para encontrar durante a depuração no navegador.

Se você está trabalhando em um projeto maior, também é um grande auxiliar para impor convenções de codificação para toda a equipe. JSHint é muito flexível e pode ser facilmente ajustado às necessidades do projeto.

Para este plugin, todos os arquivos que devem ser verificados são listados em um array:

jshint: {
    files: ['Gruntfile.js', 'lib/**/*.js']
}

jshint: {

files: ['Gruntfile.js', 'lib/**/*.js']

}

Neste exemplo, a configuração do Grunt, em si, é verificada primeiro e, depois, todos os arquivos JavaScript em todas as subpastas de lib.

Concatenação de arquivos

Esta é uma chamada multitarefa (multi task). Você pode especificar vários grupos de arquivos que serão concatenados. O nome dos grupos é com você, ele só precisa ser um identificador JavaScript válido:

concat: {
    js: {
        src: ['lib/module1.js', 'lib/module2.js', 'lib/plugin.js'],
        dest: 'dist/script.js'
    },
    css: {
        src: ['style/normalize.css', 'style/base.css', 'style/theme.css'],
        dest: 'dist/screen.css'
    }
}

concat: {

js: {

src: ['lib/module1.js', 'lib/module2.js', 'lib/plugin.js'],

dest: 'dist/script.js'

css: {

src: ['style/normalize.css', 'style/base.css', 'style/theme.css'],

dest: 'dist/screen.css'

}

Durante o processo de construção, todos os arquivos nesses grupos serão concatenados. Se você só precisa atualizar uma parte específica, você pode passar o nome da tarefa como parâmetro, por exemplo, grunt concat:css.

Minificação (Minification)

Minififcar arquivos JavaScripts funciona da mesma maneira: você pode configurar um ou vários grupos de arquivos a serem processados. Para poupá-lo da digitação dos mesmos nomes de arquivos, você pode consultar os nomes de arquivos de outras tarefas existentes. No exemplo, veja a reutilização baseada na tarefa de concatenação:

uglify: {
    dist: {
        src: ['<%= concat.js.dest %>'],
        dest: 'dist/script.min.js'
    }
}

uglify: {

dist: {

src: ['<%= concat.js.dest %>'],

dest: 'dist/script.min.js'

}

Execução automática de tarefas

Todos os passos importantes estão configurados e o processo de construção (build) está funcionando perfeitamente. Mas o que pode ser mais irritante do que executar o processo manualmente toda hora?

Com o plugin de tarefa watch, é possível executar tarefas automaticamente, em segundo plano (background), cada vez que um conjunto de arquivos muda no projeto:

watch: {
    files: '<%= jshint.files %>',
    tasks: 'jshint'
}

watch: {

files: '<%= jshint.files %>',

tasks: 'jshint'

}

Iniciando o Grunt com grunt watch, a tarefa jshint será executada assim que um arquivo JavaScript que conste na lista de arquivos da tarefa-configuração jshint for alterado.

Considerações finais sobre Grunt

Com Grunt, desenvolvedores front-end têm uma ferramenta muito flexível à mão, que ajuda muito com a automatização de tarefas recorrentes. Uma vez configurado, você pode deixar ou a tarefa watch rodando em background ou integrar o Grunt em sua IDE ou editor de códigos em um build system (que funciona muito bem no Sublime Text, por exemplo).

O validação e teste de código aumenta a qualidade geral e ajuda a manter um padrão constante de codificação, o que torna o Grunt, também, uma ferramenta perfeita para equipes que trabalham em projetos de grande escala.

Continuando os estudos com Grunt

Desde o dia da publicação deste artigo pra cá, surgiu outra excelente ferramenta de build, o Gulp. Leia o artigo sobre Gulp e conheça suas vantagens.