Esse cara é o Grunt

Transcript

1. grunt esse cara é o @almirfilho @davidsonfellipe
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
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!