Esse cara é o Grunt

Esse cara é o Grunt

054c583ad5dc09a861874e14dcb43e4c?s=128

Davidson Fellipe

December 15, 2013
Tweet

Transcript

  1. grunt esse cara é o @almirfilho @davidsonfellipe

  2. None
  3. @almirfilho @davidsonfellipe

  4. globo .com

  5. do workflow rei o front-end

  6. linha de comando nodejs automatizador de tarefas

  7. o grunt não é o único

  8. ant java make shell cake coffeescript rake ruby

  9. downloads 2013

  10. 100k 200k 300k downloads 2013 nov out set ago jul

    jun mai abr mar fev jan
  11. None
  12. automatizamos? por que

  13. repetitivo minimizar trabalho

  14. detalhes muitos para lembrar

  15. conversão frameworks e libs compilação linting testes minificação

  16. complexos útil para projetos

  17. rodar testes pré-processadores:dev js/css lint web server scaffolding otimizar imagens

    criar sprites live reloading minificação e obfuscação concatenação pré-processadores:prod gerar release deploy dev prod
  18. eficiência! produtividade!

  19. paz de espírito

  20. grunt iniciando com

  21. node.js & npm primeiro as coisas primeiras

  22. grunt-cli instalação global instalação local configuração configuração grunt & tools

    package.json Gruntfile.js
  23. $ npm install -g grunt-cli grunt-cli instalação global

  24. { "name": "dave-fulero", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-uglify":

    "~0.2.2" } } package.json configuração
  25. $ npm install grunt & tools instalação local

  26. --save-dev $ npm install nome-pacote --save-dev

  27. module.exports = function(grunt){ grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json’), uglify: {/* configuração da

    tarefa */} }); grunt.loadNpmTasks(‘grunt-contrib-uglify’); grunt.registerTask(‘default’, [‘uglify’]); } Gruntfile.js configuração
  28. grunt.initConfig({ uglify: { options: { banner: ‘/* dave fulêro */\n’

    }, build: { src: ‘src/<%= pkg.name %>.js’, dest: ‘build/<%= pkg.name %>.min.js’ } } });
  29. pop quem é

  30. concatenação de arquivos a.js e.js i.js o.js u.js vogais.js

  31. $ npm install grunt-contrib-concat --save-dev grunt-contrib-concat o cara que concatena

    seus arquivos
  32. grunt.initConfig({ concat: { options: { separator: ';', }, dist: {

    src: ['src/a.js', 'src/e.js'], dest: 'build/vogais.js', } } }); concat no Gruntfile.js
  33. $ grunt concat concatenação rodando manualmente

  34. obfuscação e minificação de scripts all.min.js all.js

  35. var toSeconds = function(hour) { return hour * 3600; };

    var toSeconds = function(a) { return a * 3600; }; var toSeconds=function(a){return a*3600;}; obfuscação minificação
  36. $ npm install grunt-contrib-uglify --save-dev grunt-contrib-uglify o cara que comprime

    seus arquivos
  37. grunt.initConfig({ uglify: { build: { src: 'src/all.js', dest: 'build/all.min.js' }

    } }); uglify no Gruntfile.js
  38. $ grunt uglify obfuscação e minificação rodando manualmente

  39. pré-processadores de código widget.scss widget.css

  40. $ npm install grunt-contrib-compass --save-dev grunt-contrib-compass o cara que compila

    seu sass
  41. grunt.initConfig({ compass: { dev: { options: { sassDir: 'src/scss', cssDir:

    'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img' } }, prod: { /* ... */ } }}); compass no Gruntfile.js
  42. grunt.initConfig({ compass: { dev: { /* ... */ }, prod:

    { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img', outputStyle: 'compressed', noLineComments: true }}}}); compass no Gruntfile.js
  43. $ grunt compass:dev compilação de sass $ grunt compass:prod rodando

    manualmente
  44. pré-processadores grunt-contrib-sass sass stylus less coffeescript grunt-contrib-stylus grunt-contrib-less grunt-contrib-coffee

  45. testes automatizados specs sucesso erro

  46. $ npm install grunt-contrib-jasmine --save-dev grunt-contrib-jasmine o cara que testa

    seu código e te avisa
  47. grunt.initConfig({ jasmine: { src: 'src/**/*.js', options: { specs: 'spec/*Spec.js', helpers:

    'spec/*Helper.js' } } }); jasmine no Gruntfile.js
  48. $ grunt jasmine rodando manualmente testes automatizados

  49. suites de testes grunt-contrib-jasmine jasmine mocha qunit grunt-simple-mocha grunt-contrib-qunit

  50. watch fique de olho widget.scss widget.css save file all.min.js all.js

  51. $ npm install grunt-contrib-watch --save-dev grunt-contrib-watch o cara que vigia

    tudo para você
  52. grunt.initConfig({ watch: { build: { files: ['src/**/*.{scss, js}'], tasks: [

    'compass:dev', 'concat', 'uglify' ] } } }); watch no Gruntfile.js
  53. testes pré-processadores js/css lint criar sprites live reloading concatenação tarefas

    comuns para watch
  54. na prática globo esporte setup

  55. 6 semanas!

  56. faça suas escolhas sabiamente

  57. globo .com /talentos github.com/globocom/ IWantToWorkAtGloboCom

  58. obrigado!

  59. obrigado! /almirfilho /almirfilho /davidsonfellipe /davidsonfellipe

  60. obrigado!