AUTOMATIZANDOTAREFAS DE FRONT-END

COM GRUNTJSRafael Lyra

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.

COMO FUNCIONA O GRUNTJS?O FUNCIONAMENTO DO GRUNT DEPENDE DE 3 COISAS:

O Grunt CLI (global)O Grunt (local)Os plugins do Grunt

COMO O GRUNT CLI FUNCIONAO GRUNT CLI É INSTALADO NO SEU COMPUTADOR DE FORMAGLOBAL VIA NPM, E VOCÊ USA ELE PARA RODAR DIFERENTES

VERSÕES DO GRUNT

Cada vez que você roda o Grunt CLI ele procura por uma versãodo Grunt instalada e quando ele encontra ele carrega a Bibliotecado Grunt local, aplica as configurações, e executa as tarefas que

você pediu.

COMO O GRUNT FUNCIONA

O GRUNT PODE SER INSTALADO EM QUALQUERPASTA DO SEU COMPUTADOR VIA NPM, O QUEPERMITE QUE VOCÊ TENHA VÁRIAS VERSÕESDO GRUNT INSTALADAS SIMULTÂNEAMENTE.

O funcionamento do Grunt depende de 2 arquivos, opackage.json, e o Gruntfile.js (ou .coffee)

OS PLUGINS DO GRUNTOS PLUGINS TAMBÉM SÃO INSTALADOS LOCALMENTE VIA

NPM E SÃO CARREGADOS NO SEU GRUNTFILE

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

handlebars - mustache - batman - haml - hoganjs - twig...jadejasmine - nodeunit - qunit - mocha - behat ...selenium - phantonjs / casperjsjshint - jslintrequirejs - browserifyrework - sass - less - stylus - absurdjsemberjs - backbone - canjs - angularjsheroku - akamai - aws - jenkins - nginxbowerbrowserstackcoffescript - dartssh - ftp - rsyncwordpress - jekyll

Concatenar arquivosCopiar arquivosCriação de links simbólicosChecar dependencias quebradas em AMDCriar arquivo manifesto para appcache com HTML5Fazer beautify de arquivos javascript e cssCrontrole de cache com timestamp/hashRenomear arquivos usando regex (?)Compilar markdown para htmlCriar sprites (sem o compass)Criar site maps

grunt-run-grunt

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

VOCÊ ENCONTRA A MAIORIA DOS PLUGINS EM:HTTP://GRUNTJS.COM/PLUGINS

QUEM USA O GRUNT?A Adobe usa o grunt no brackets.O jQuery usa o grunt no jQuery no jQuery UI e no QUnitO twitter usa o Grunt no TweetDeck e no TypeaheadO Apontador.com usa o grunt nos seus projetos.

... E BUSCANDO O TERMO GRUNTJS NO GITHUB EU ENCONTREI:

684 repositorios públicos5.238 issues (a maioria pedindo para instalar o gruntjs nosprojetos)

THANKS!

RAFAEL LYRAfront end developer at apontador.com

blog: github: twitter: linkedin:

rafaellyra.comrafaellyra@rafaellyra

br.linkedin.com/in/rafaellyra/