Esse cara é o Grunt

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!