Grunt
Introdução
[editar | editar código-fonte]O GruntJs, criado por Ben Alman, é uma aplicação de linha de comando, que roda no Node.js (um interpretador JavaScript), feita totalmente em JavaScript para automação de tarefas de build (Task Runner), principalmente tarefas em aplicações JavaScript, tais como concatenação de scripts, compilação, minificação, testes unitários, linting, dentre muitos outros.
História e Vantagens
[editar | editar código-fonte]As primeiras linhas do código-fonte foram adicionados ao GruntJS em 2011. O Grunt v0.4 foi lançado em 18 de fevereiro de 2013. O Grunt v0.4.5 foi lançado em 12 de maio de 2014. A versão estável do Grunt é 1.0.0 RC1 que foi lançado em 11 de fevereiro de 2016. A seguir seguem algumas das vantagens da utilização da ferramenta.
Vantagens
[editar | editar código-fonte]- Usando Grunt, você pode executar minification, compilação e análise de arquivos com grande facilidade.
- Possibilidade de automatização de tarefas repetitivas com o mínimo esforço.
- Ele tem uma abordagem simples, que inclui tarefas em JS e configuração em JSON.
- Grunt unifica os fluxos de trabalho de desenvolvedores web.
- Ele acelera o fluxo de trabalho de desenvolvimento e melhora o desempenho dos projectos.
- Possui uma grande variedade de pluguins para diferentes tipos de tarefas de build, reduzindo assim a necessidade de uma grande quantidade de ferramentas para tal propósito
Instalação
[editar | editar código-fonte]O Grunt é baseado no Node.js então o primeiro passo é instalá-lo. No site já há opção de download, mas você pode usar o instalador de pacotes do seu sistema operacional (apt-get no Linux, homebrew no Mac etc).
Depois de instalar o Node, pode instalar as ferramentas de linha de comando do Grunt apenas executando no terminal:
npm install -g grunt-cliPackage.json
[editar | editar código-fonte]No diretório do projeto, será necessário possuir o package.json, o arquivo de dependências do NPM, pois todo plugin do Grunt que for instalado precisa ser referenciado como dependência nesse arquivo. Isso vai proporciona uma grande economia de tempo, pois ao executar o comando npm install será tudo instalado, não sendo necessário sempre rodar tudo novamente. Este arquivo pode ser criado manualmente no editor de texto ou rodar o comando:
npm initFeito isso pode-se instalar os plugins no projeto (Instalação Local).
Um exemplo de instalação de Plugin:
npm install grunt-contrib-cssmin --save-devCom isso, o plugin seria instalado na pasta do projeto e ficaria salvo como dependência no package.json. Isso por que foi passado o parâmetro –save-dev.
Para que o Grunt funcione, é necessário tê-lo instalado no projeto (temos uma instalação Global do cliente via terminal com o -g e agora vai instalar o Grunt localmente), para isso executamos o comando:
npm install grunt --save-devGruntfile.js
[editar | editar código-fonte]O arquivo Gruntfile.js define a configuração das tarefas e como irão se comportar, podendo ser criado no seu editor favorito ou com o comando grunt init.
Um exemplo de configuração básica do arquivo é o seguinte:
module.exports = function(grunt) {
// Configuração do Projeto
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
'build/home.js': 'src/home.js',
'build/main.js': 'src/main.js'
}
});
// Carrega o Plugin para executar a tarefa "uglify"
grunt.loadNpmTasks('grunt-contrib-uglify');
// Tarefas
grunt.registerTask('default', ['uglify']);
};A linha grunt.initConfig(config) especifica onde iniciam as configurações das tarefas.
No exemplo, é suposto que os arquivos são criados numa pasta src/ e se 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.
Todo plugin instalado, deve ser carregado, como mostrado na expressão:
grunt.loadNpmTask(‘grunt-contrib-uglify’);.As tarefas que serão executadas com o comando grunt (sem passar nenhum parâmetro) no terminal são registradas como na expessão grunt.registerTask(‘default’, [‘uglify’]); onde foi configurado a tarefa ‘default’ (que é executada automaticamente com o comando grunt) que, nesse caso, chamou uma tarefa uglify, sendo possível chamar várias ao mesmo tempo.
Se a intenção for executar somente a tarefa uglify, poderia rodar o comando grunt com o parâmtro uglify:
grunt uglifySe existisse outra tarefa com o nome cssmin, você executaria grunt cssmin ou configuraria a tarefa ‘default’ para chamar também a cssmin:
grunt.registerTask('default', ['uglify', 'cssmin'])
Outras Tarefas
[editar | editar código-fonte]Há muitos muitos outros plugins úteis no Grunt. Para compiladores de CSS, existe o LESS, Stylus e SASS. Pra minificar, temos o uglify, o cssmin e o htmlmin. Há 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.
Há uma lista imensa de plugins da comunidade pra fazer as mais variadas tarefas.
Conclusão
[editar | editar código-fonte]Aqui foi exposto uma introdução ao Grunt, suas ideias e alguns poucos recursos. O site oficial deles tem muito mais documentação. 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.