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.

1. AUTOMATIZANDO
TAREFAS DE FRONT-END
COM GRUNTJS
Rafael Lyra

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.

6. COMO O GRUNT FUNCIONA

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

11. handlebars - mustache - batman - haml - hoganjs - twig...
jade
jasmine - nodeunit - qunit - mocha - behat ...
selenium - phantonjs / casperjs
jshint - jslint
requirejs - browserify
rework - sass - less - stylus - absurdjs
emberjs - backbone - canjs - angularjs
heroku - akamai - aws - jenkins - nginx
bower
browserstack
coffescript - dart
ssh - ftp - rsync
wordpress - jekyll

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

13. grunt-run-grunt
Grunt task to run Gruntfiles in a child process. Gruntception!

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/