Devshare - Automatizando tarefas de javascript com GruntJS

  • 743 views
Uploaded on

Slides do talk de GruntJS no 4º Devshare.

Slides do talk de GruntJS no 4º Devshare.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
743
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/