No desenvolvimento Front-End tem algumas tarefas que são como um castigo se feitas manualmente. Por isso, temos que automatizar algumas tarefas. Para nos auxiliar com isso, temos o GruntJS.
O GruntJS é um task runner que automatiza tarefas e roda via terminal.
Instalação
Para rodá-lo, precisamos primeiramente ter o NodeJS e NPM, instalados.
Podendo ser baixado, aqui: NodeJS com NPM
Agora que já temos o NodeJS e NPM, instalados. Temos que instalar o GruntJS via terminal:
npm install -g grunt-cli
Podemos ver se está instalado com o commando:
grunt --version
Para o GruntJS funcionar, precisamos de 2 arquivos: package.json e o Gruntfile.js.
O package.json é um arquivo do NodeJS, onde terão as informações do projeto e os plugins do GruntJS. Ex:
{
"name": "project name",
"version": "1.0.0",
"title": "Project Title",
"devDependencies": {
"grunt": ">=0.4.5",
"load-grunt-config": "^0.10.0",
"load-grunt-tasks": "^0.4.0"
},
}
O Gruntfile.js é o arquivo de configuração do GruntJS. Ex:
module.exports = function( grunt ) {
grunt.initConfig({
// Tasks
});
};
Para adicionar um plugin no seu package.json, podemos utilizar os comandos:
Para as dependências para produção (dependencies)
npm install grunt --save
Para dependências, apenas para o desenvolvimento (devDependencies)
npm install grunt --save-dev
Se você está utilizando um package.json, já com os plugins listados, basta executar o comando:
npm install
Configuração
Agora com os plugins instalados, precisando configurar cada tarefa para ser executado ao rodar o GruntJS.
No link http://gruntjs.com/plugins, você pode conferir os plugins para o GruntJS. Clicando no plugin desejado, será encaminhado para o host https://www.npmjs.com, onde terá as informações para a configuração do package escolhido.
Como exemplo, escolhi o plugin grunt-contrib-uglify, sendo levado para https://www.npmjs.com/package/grunt-contrib-uglify. Onde podemos conferir, como configurar a tarefa.
Abaixo, como podemos ver no método initConfig, iremos passar um objeto com a configuração do plugin. Com o método loadNpmTasks, informaremos a tarefa que deverá ser carregada. E para finalizar, devemos registrar as tarefas que teremos no projeto.
module.exports = function( grunt ) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/input2.js']
}
}
}
});
// Plugins do Grunt
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
// Tarefas que serão executadas
grunt.registerTask( 'default', [ 'uglify' ] );
};
Para ficar mais claro, temos outro exemplo com mais plugins e tarefas.
module.exports = function( grunt ) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/input2.js']
}
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'release/css',
src: ['*.css', '!*.min.css'],
dest: 'release/css',
ext: '.min.css'
}]
}
}
});
// Plugins do Grunt
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
// Tarefas que serão executadas
grunt.registerTask( 'default', [ 'cssmin', 'uglify' ] );
grunt.registerTask( 'css', [ 'cssmin' ] );
grunt.registerTask( 'js', [ 'uglify' ] );
};
Acima, temos a configuração dos plugins cssmin e uglify no Gruntfile.js, onde os mesmos serão carregados com o método loadNpmTasks e registramos 3 tarefas.
Executando as tarefas
No terminal, rodando o comando:
grunt
Será executada a lista de tarefas default (cssmin e uglify)
Com o comando:
grunt css
Será executada a lista css
E o comando:
grunt js
a lista js
Acredito que ficou simples de compreender a lógica para utilizar as tarefas do GruntJS. Com isso, temos tudo instalado e configurado. Agora só ser feliz com as tarefas automatizadas.
A dica
Dependendo da quantidade de configurações no seu Gruntfile.js, a manutenção fica bem complicada. Para resolver o problema, podemos utilizar o plugin load-grunt-config, para termos mais organização.
https://github.com/firstandthird/load-grunt-config
O load-grunt-config, permite quebrar a configuração do Gruntfile.js por tarefa. Você pode usar os arquivos na extensão .js , .json , .yaml , .cson , ou .coffee.
Instalando o plugin
npm install load-grunt-config --save-dev
O Gruntfile.js, ficará semelhante ao exemplo abaixo:
module.exports = function(grunt) {
// Carrega configurações da pasta grunt-configs/
var path = require('path');
require('load-grunt-config')(grunt, {
init: true,
configPath: path.join(process.cwd(), 'source/_tasks'),
data: {
projectDir : '../../public/assets/',
projectDev : 'source/_assets/',
pkg: grunt.file.readJSON('package.json')
}
});
};
'source/_tasks' - Será o caminho para onde estão os arquivos com as configurações das tarefas.
No objeto data, informamos as variáveis que será retornadas pelo parâmetro options no arquivo de configuração de cada plugin, como podemos ver abaixo.
module.exports = function(grunt, options){
// configuração
};
No Gruntfile.js, o caminho das configurações se encontram na pasta source/_tasks e a estrutura ficaria assim:
>source
>_tasks
> aliases.yaml
> cssmin.js
A sua pasta com as tarefas precisará ter o arquivo aliases.(js|.json|yaml|cson|coffee) para definir as suas tarefas.
Exemplo com a extensão .yaml:
aliases.yaml
default:
- 'cssmin'
- 'uglify'
css:
- 'cssmin'
js:
- 'uglify'
Abaixo, um exemplo com a extensão .js, da configuração de um plugin.
cssmin.js
module.exports = function(grunt, options){
var projectDir = options.projectDir;
return {
site: {
files: [{
expand: true,
cwd: '<%= projectDir %>css/site/',
src: ['*.css'],
dest: '<%= projectDir %>css/site/'
}]
}
};
};
E assim, podemos utilizar o GruntJS, para estar automatizando as tarefas que dão um bom trabalho se feitas manualmente e poupam um bom tempo, nos deixando mais produtivos.
