Esse cara é o grunt

♫ O cara que observa seus arquivos toda hora
O cara que te avisa quando você quebra o build
O cara que faz o reload por você
O cara que após o save, te chama
Pra dizer se o teste passou ou quebrou
Esse cara é o Grunt!

Transcript

1. grunt esse cara é o @almirfilho @davidsonfellipe
2. @almirfilho @davidsonfellipe
4. do workflow rei o front-end
5. linha de comando nodejs automatizador de tarefas
6. o grunt não é o único
7. ant java make shell cake coffeescript rake ruby
8. 100k 200k 300k downloads 2013 nov out set ago jul jun mai abr mar fev jan 400k dez
9. 100k 200k 300k downloads 2013-14 nov out set ago jul jun mai abr mar fev jan 400k dez 500k 600k 700k mai 2014
11. automatizamos? por que
12. repetitivo minimizar trabalho
13. detalhes muitos para lembrar
14. conversão frameworks e libs compilação linting testes minificação
15. complexos útil para projetos
16. rodar testes pré-processadores:dev js/css lint web server scaffolding criar sprites live reloading otimizar imagens concatenação pré-processadores:prod minificação e obfuscação gerar release deploy dev prod
17. eficiência! produtividade!
18. paz de espírito
19. grunt iniciando com
20. node.js & npm primeiro as coisas primeiras
21. grunt-cli instalação global instalação local configuração configuração grunt & tools package.json Gruntfile.js
22. $ npm install -g grunt-cli grunt-cli instalação global
23. { "name": “lusac-noob", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-uglify": "~0.2.2" } } package.json configuração
24. $ npm install grunt & tools instalação local
25. --save-dev $ npm install nome-pacote --save-dev
26. module.exports = function(grunt){ grunt.initConfig({ uglify: {/* config da tarefa */}, jasmine: {/* config da tarefa */}, compass: {/* config da tarefa */} }); grunt.loadNpmTasks(‘grunt-contrib-uglify’); grunt.loadNpmTasks(‘grunt-contrib-jasmine’); grunt.loadNpmTasks(‘grunt-contrib-compass’); } Gruntfile.js configuração
27. grunt.initConfig({ uglify: { options: { banner: ‘/* dave fulêro */\n’ }, build: { src: ‘src/app.js’, dest: ‘build/app.min.js’ } }, jasmine: {/* config da tarefa */}, compass: {/* config da tarefa */} });
28. grunt.registerTask(‘build’, [ ‘jasmine’, ‘uglify’, ‘compass’ ]); ! grunt.registerTask(‘run’, [ ‘build’, ‘connect’ ]); ! grunt.registerTask(‘default’, ['run']);
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.j s 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.cs s
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 sucess o 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.cs s save file all.min.j s all.js uglify compass
51. $ npm install grunt-contrib-watch --save-dev grunt-contrib-watch o cara que vigia tudo para você
52. grunt.initConfig({ watch: { scripts: { files: ['src/**/*.js'], tasks: ['concat:scripts', 'uglify'] } } }); watch no Gruntfile.js
53. concatenação js/css lint testes criar sprites pré-processadores live reloading tarefas comuns para watch
54. na prática globo esporte setup
55. 6 semanas!
56. faça suas escolhas sabiamente
57. obrigado! /almirfilho /almirfilho /davidsonfellipe /davidsonfellipe