Posted on: October 20, 2021 09:50 PM
Posted by: Renato
Categories: Grunt javascript front-end
Views: 146
Automação de build de front-end com Grunt.js
Foi feito em JavaScript e com grande foco em automatizar tarefas de front-end.
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).
O Grunt.js
É uma ferramenta automação de tarefas de build feita totalmente em JavaScript. Ela roda no Node.js, que é um interpretador JavaScript que você pode instalar no seu computador. No final do artigo mostro o processo de instalação pra quando for rodar a primeira vez.
O central no Grunt é um arquivo que descreve as tarefas a serem executadas no build do projeto. E esse mesmo arquivo é escrito em JavaScript, então nada de XML ou sintaxes estranhas como em outras ferramentas. Esse arquivo é o Gruntfile.js que você cria na raiz do seu projeto.
A estrutura básica dele é essa:
module.exports = function(grunt) {
grunt.initConfig({
// configurações das tasks
});
// carrega plugins
grunt.loadNpmTasks('nome-do-plugin');
};
Repare que é uma função JS que chama outras configurações. A initConfig é onde vamos colocar as regras das tarefas que queremos executar (onde indicamos, por exemplo, quais arquivos minificar). Repare que ele recebe um objeto JS, como num JSON. No final, chamamos a loadNpmTasks pra registrar um plugin do Grunt que vai trazer alguma funcionalidade.
Minficando JS com Uglify
Vamos configurar a minificação de JavaScript usando o UglifyJS. Registramos o plugin — chamado grunt-contrib-uglify usando grunt.loadNpmTasks('grunt-contrib-uglify');.
A configuração em si é bem simples: basta listar os arquivos a serem minficados (origem e destino):
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
'build/home.js': 'src/home.js',
'build/main.js': 'src/main.js'
}
});
// carrega plugins
grunt.loadNpmTasks('grunt-contrib-uglify');
};
No exemplo, eu supus que você cria seus arquivos numa pasta src/ e 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.
Por fim, pra executar essa tarefa, basta rodar grunt uglify no terminal.
Pré-processando CSS
Agora é muito fácil adicionar outros plugins e executar outras tarefas. Por exemplo, usando o grunt-contrib-less, podemos compilar um arquivo LESS pra CSS:
less: {
'build/estilo.css': 'src/estilo.less'
}
Pra rodar, basta executar grunt less no terminal. Pra compilar SASS ou Stylus, é praticamente a mesma coisa, só muda o nome do plugin.
Mais: se quiser concatenar os arquivos CSS num só, além de compilar todos os LESS, dá pra fazer isso listando os arquivos:
less: {
'build/estilo.css': ['src/header.less', 'src/main.less', 'src/footer.less']
}
Ou usar padrões nos nomes dos arquivos pra ficar mais fácil ainda:
less: {
'build/estilo.css': ['src/*.less']
}
E isso vale, claro, pras outras tarefas também, como a do uglify que vimos antes. E estamos só vendo o início do Grunt. Dá pra fazer muito mais coisas nessas configurações, pra facilitar tudo mais ainda.
Aliás, um recurso que podemos fazer é simplificar a execução das tarefas pra não precisarmos chamar uma por uma na hora de rodar o comando. Podemos definir novas tarefas com grunt.registerTask(). Passamos o nome da nova task e uma lista de tasks a serem executadas:
grunt.registerTask('default', ['uglify', 'less']);
A nova task default pode ser executada na linha de comando com grunt default e já vai rodar tanto o less quanto o uglify pra gente. Melhor ainda, esse nome default é especial então podemos executar tudo só rodando grunt no terminal.
O código final do exemplo está aqui.
Mais tarefas
Há muitos outros plugins úteis no grunt. Pra compiladores de CSS, temos o LESS, Stylus e SASS. Pra JS, temos também CoffeeScript. Pra minificar, temos o uglify, o cssmin e o htmlmin. Temos 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.
Isso só falando de alguns dos plugins oficiais. Há uma lista imensa de plugins da comunidade pra fazer as mais variadas tarefas. Como o poderoso grunticon que gera uma sprite de arquivos SVG com fallback para PNGs.
A instalação do Grunt.js
O Grunt é baseado no Node.js então você deve primeiro instalá-lo. No site já há um botão de download logo de cara ou você pode usar o instalador de pacotes do seu sistema operacional (apt-get no Linux, homebrew no Mac etc).
Depois que você instalou o Node, pode instalar as ferramentas de linha de comando do Grunt apenas executando no terminal: npm install -g grunt-cli
Próximo passo é configurar nosso projeto como um artefato do node para que possamos instalar os plugins e outras dependências. É bem fácil. Crie um arquivo package.json na raiz do seu projeto onde colocaremos configurações do projeto — o mínimo é o nome do projeto e um número de versão:
{
"name": "grunt-demo",
"version": "0.0.1"
}
Agora, a instalação do Grunt é feita de acordo com o projeto fazendo: npm install grunt --save-dev.
Cada plugin do grunt que você for usar, vai instalar da mesma forma:
npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-less --save-dev
Aí é só usar esses plugins no seu Gruntfile.js como vimos antes.
Mais
Vimos uma introdução do grunt, suas ideias e alguns poucos recursos. O site oficial deles tem muito mais documentação. Em português, há os excelentes artigos do Zeno Rocha e do Felipe Fialho.
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. Aqui na Caelum mesmo, usamos para buildar a parte front-end de um projeto maior com Java no backend.
Fonte:
https://blog.caelum.com.br/automacao-de-build-de-front-end-com-grunt-js/
Donate to Site
Renato
Developer