O GruntJS é um gerenciador de tarefas front-end escrito em JavaScript que automatiza tarefas como minificação, validação e otimização de código. Ele funciona por meio do Grunt CLI, que carrega a biblioteca Grunt local e executa as tarefas definidas nos plugins instalados, como grunt-contrib-uglify para minificação e grunt-contrib-watch para monitoramento de arquivos.
2. O QUE É O GRUNTJS?
O GRUNTJS É UM GERENCIADOR DE TAREFAS FRONT-END
ESCRITO EM JAVASCRIPT (NODEJS).
O Grunt pode rodar apenas uma tarefa de cada vez, ou várias
tarefas juntas.
3. COMO FUNCIONA O GRUNTJS?
O FUNCIONAMENTO DO GRUNT DEPENDE DE 3 COISAS:
O Grunt CLI (global)
O Grunt (local)
Os plugins do Grunt
4. COMO O GRUNT CLI FUNCIONA
O GRUNT CLI É INSTALADO NO SEU COMPUTADOR DE FORMA
GLOBAL VIA NPM, E VOCÊ USA ELE PARA RODAR DIFERENTES
VERSÕES DO GRUNT
5. Cada vez que você roda o Grunt CLI ele procura por uma versão
do Grunt instalada e quando ele encontra ele carrega a Biblioteca
do Grunt local, aplica as configurações, e executa as tarefas que
você pediu.
7. O GRUNT PODE SER INSTALADO EM QUALQUER
PASTA DO SEU COMPUTADOR VIA NPM, O QUE
PERMITE QUE VOCÊ TENHA VÁRIAS VERSÕES
DO GRUNT INSTALADAS SIMULTÂNEAMENTE.
8. O funcionamento do Grunt depende de 2 arquivos, o
package.json, e o Gruntfile.js (ou .coffee)
9. OS PLUGINS DO GRUNT
OS PLUGINS TAMBÉM SÃO INSTALADOS LOCALMENTE VIA
NPM E SÃO CARREGADOS NO SEU GRUNTFILE
10. grunt-contrib-clean
utilizado para excluir arquivos e pastas.
grunt-contrib-compass
compila sass para css utilizando o compass
grunt-contrib-connect
cria um web server
grunt-contrib-uglify / grunt-contrib-mincss
minificam js/css
grunt-contrib-watch
roda tasks quando um arquivo é adicionado/alterado/excluído
grunt-shell
para rodar comandos no shell
grunt-plato
gerar relatórios de códigos
12. Concatenar arquivos
Copiar arquivos
Criação de links simbólicos
Checar dependencias quebradas em AMD
Criar arquivo manifesto para appcache com HTML5
Fazer beautify de arquivos javascript e css
Crontrole de cache com timestamp/hash
Renomear arquivos usando regex (?)
Compilar markdown para html
Criar sprites (sem o compass)
Criar site maps
14. VOCÊ ENCONTRA A MAIORIA DOS PLUGINS EM:
HTTP://GRUNTJS.COM/PLUGINS
15. QUEM USA O GRUNT?
A Adobe usa o grunt no brackets.
O jQuery usa o grunt no jQuery no jQuery UI e no QUnit
O twitter usa o Grunt no TweetDeck e no Typeahead
O Apontador.com usa o grunt nos seus projetos.
... E BUSCANDO O TERMO GRUNTJS NO GITHUB EU ENCONTREI:
684 repositorios públicos
5.238 issues (a maioria pedindo para instalar o gruntjs nos
projetos)
16. THANKS!
RAFAEL LYRA
front end developer at apontador.com
blog: rafaellyra.com
github: rafaellyra
twitter: @rafaellyra
linkedin: br.linkedin.com/in/rafaellyra/