Aprendendo a usar Grunt em dois passos!

O Grunt foi desenvolvido pelo @cowboy com o objetivo de automatizar tarefas para desenvolvedores. Com ele é possí­vel minificar, concatenar, automatizar deploy e outras pencas de funcionalidades que são realizadas com o Grunt através da penca de plugins que já existem para essa ferramenta.

Primeiro passo: como instalar

Como todos devem saber o Grunt roda no node.js, sendo assim você precisa ter ele instalado, assim como o npm. Feito isso, caso você tenha instalado ele alguma vez, recomendo que desinstale, senão com certeza você vai ter problemas no futuro, então vai lá:

sudo npm uninstall -g grunt

Vamos instalar o grunt-cli, assim podemos rodar diferentes versões do Grunt em diferentes projetos, e o melhor, até simultaneamente!

Agora sim, sem qualquer receio, mete ficha:

sudo npm install -g grunt-cli

Segundo passo: iniciando um projeto

Há duas formas de iniciar um projeto com Grunt. A primeira é com o comando grunt-init passando o template que você deseja, por exemplo, um projeto para um módulo node.js:

grunt-init node

Depois disso ele cria um scaffolding a partir do template que você escolheu.

A outra forma é criar sem templates. Você precisará de um arquivo package.json e o Gruntfile.js.

package.json

Esse json deve conter informações do seu projeto. Você pode gerar ele através do comando npm init. Segue abaixo um exemplo básico de um package.json:

{
  "name": "and-after",
  "version": "1.0.0",
  "description": "Design e Tecnologia por sua conta",
  "keywords": ["tecnologia, desenvolvimento"]
  "author": "And After"
}

Gruntfile.js

O Gruntfile.js é onde você vai escrever suas tarefas, carregar os plugins e as configurações da sua aplicação. Exemplo:

module.exports = function(grunt) {
	grunt.initConfig({
	      pkg: grunt.file.readJSON('package.json'),
	      uglify: {
	          options: {
	          banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
	          },

	          build: {
	              src: 'src/<%= pkg.name %>.js',
	              dest: 'build/<%= pkg.name %>.min.js'
	          }
	      }
	 });

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

	// plugin
	grunt.registerTask('default', ['compass', uglify']); };
}

Nesse caso eu tenho uma tarefa, unglify. Para rodar basta passar grunt nomedatarefa.

Aproveitando o espaço, aproveito para mostrar o grunt watch. Caso você não conheça, vale dar uma olhada. Ele fica “assistindo” suas mudanças e a cada adição, exclusão e alteração de arquivos, é rodado suas tarefas sem precisar ir no terminal. É demais! Um exemplo dessa tarefa:

watch: {
 jshint: {
	 files: '**/*.js',
	 tasks: ['jshint']
 },
 concat: {
 	 files: '**/*.js',
	 tasks: ['jshint', 'concat:dist', 'uglify']
 }
}

Feito isso é só rodar grunt watch e ele fica alerta à toda mudança e executa as tarefas automaticamente, no caso jshint e concat.

Moçada, acho que é isso. Não vivo mais sem o Grunt. Se curtiu, aproveita e vota nele para “Projeto Open Source do ano” no .net awards.

Referências:

http://gruntjs.com/
http://weblog.bocoup.com/introducing-grunt/