Começando Com GruntJS | Hemerson Vianna | Nerd Calistênico
comecando com gruntjs
Começando com GruntJS
Publicado em 08 . Outubro . 2015 e atualizado em 15 . Outubro . 2015
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.
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:
Podemos ver se está instalado com o commando:
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:
"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:
Para adicionar um plugin no seu package.json, podemos utilizar os comandos:
Para as dependências para produção (dependencies)
Para dependências, apenas para o desenvolvimento (devDependencies)
Se você está utilizando um package.json, já com os plugins listados, basta executar o comando:
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.
// Plugins do Grunt
// Tarefas que serão executadas
grunt.registerTask( 'default', [ 'uglify' ] );
Para ficar mais claro, temos outro exemplo com mais plugins e tarefas.
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.
No terminal, rodando o comando:
Será executada a lista de tarefas default (cssmin e uglify)
Será executada a lista css
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.
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.
O Gruntfile.js, ficará semelhante ao exemplo abaixo:
// Carrega configurações da pasta grunt-configs/
configPath: path.join(process.cwd(), 'source/_tasks'),
projectDir  : '../../public/assets/',
projectDev  : 'source/_assets/',
'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){
No Gruntfile.js, o caminho das configurações se encontram na pasta source/_tasks e a estrutura ficaria assim:
>_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:
- 'cssmin'
Abaixo, um exemplo com a extensão .js, da configuração de um plugin.
var projectDir = options.projectDir;
cwd: '<%= projectDir %>css/site/',
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.