Upload
rafael-lyra
View
839
Download
4
Embed Size (px)
DESCRIPTION
Slides do talk de GruntJS no 4º Devshare.
Citation preview
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/