Não seja um desenvolvedor Chucro! Como economizar tempo e melhorar os seus projetos utilizando Grunt

Um guia prático de utilização da ferramenta Grunt. Veremos como o nosso desenvolvimento pode se tornar mais fácil e quanto tempo podemos economizar automatizado tarefas repetitivas.

Transcript

1. GRUNT JS Imagem do grunt @bazevedo domingo, 1 de dezembro de 13
2. marimbondo.me domingo, 1 de dezembro de 13
3. Grunt domingo, 1 de dezembro de 13
4. domingo, 1 de dezembro de 13
5. domingo, 1 de dezembro de 13
6. domingo, 1 de dezembro de 13
7. domingo, 1 de dezembro de 13
8. domingo, 1 de dezembro de 13
9. domingo, 1 de dezembro de 13
10. domingo, 1 de dezembro de 13
11. domingo, 1 de dezembro de 13
12. domingo, 1 de dezembro de 13
13. domingo, 1 de dezembro de 13
14. Grunt É um task runner em javascript domingo, 1 de dezembro de 13
15. domingo, 1 de dezembro de 13
16. NodeJS * Instalar de acordo com o sistema operacional domingo, 1 de dezembro de 13
17. Terminal * Se não tem, instale um terminal! domingo, 1 de dezembro de 13
18. Instala o Grunt global e certifica que a versão do Grunt a ser usada é a do respectivo projeto Grunt CLI npm install -g grunt-cli domingo, 1 de dezembro de 13
19. Meta informações do projeto e suas dependências package.json npm init domingo, 1 de dezembro de 13
20. { "name" : "frontinpoa", "version" : "0.0.0", "description" : "Grunt para não ser chucro" } package.json domingo, 1 de dezembro de 13
21. { "name" : "frontinpoa", "version" : "0.0.0", "description" : "Grunt para não ser chucro", "devDependencies" : { "grunt": "~0.4.2" } } package.json domingo, 1 de dezembro de 13
22. Todas as chamadas e comportamentos dos teus módulos vão ser editadas aqui Gruntfile.js npm install grunt --save-dev domingo, 1 de dezembro de 13
23. module.exports = function (grunt) { grunt.initConfig({ }); grunt.registerTask('default', []); }; Gruntfile.js domingo, 1 de dezembro de 13
24. module.exports = function (grunt) { grunt.initConfig({ cssmin : { task : { files : { 'assets/css/main.css': ['dev/css/main.css'] } } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.registerTask('default', ['cssmin']); }; Gruntfile.js domingo, 1 de dezembro de 13
25. domingo, 1 de dezembro de 13
26. Processa os arquivos .SCSS para CSS SASS npm install grunt-contrib-sass --save-dev * Não esquecer de instalar o SASS! domingo, 1 de dezembro de 13
27. sass : { dist : { files : { 'dev/css/main.css': 'dev/sass/main-sass.scss' }, options : { debugInfo : true, sourcemap : true } } } SASS domingo, 1 de dezembro de 13
28. Serve para o grunt rodar tarefas quando arquivos selecionado forem modificados. Watch npm install grunt-contrib-watch --save-dev domingo, 1 de dezembro de 13
29. watch : { scripts : { files : ['dev/sass/*.scss'], tasks : ['sass'] } } Watch domingo, 1 de dezembro de 13
30. Recarrega o browser quando algum arquivo selecionado for modificado. Live Reload * Instalar o plugin de acordo com o browser domingo, 1 de dezembro de 13
31. watch: { scripts: { files: ['dev/sass/*.scss'], tasks: ['sass'] }, livereload : { options: { livereload: true }, files: ['dev/css/main.css', 'dev/js/main.js', 'index.html'], } } Live Reload domingo, 1 de dezembro de 13
32. Ferramenta de validação de arquivos JS JSHint npm install grunt-contrib-jshint --save-dev domingo, 1 de dezembro de 13
33. jshint : { options : { eqnull : true, unused : true, curly : true, plusplus : true, strict : true }, files: { src: ['dev/js/main.js'] } } JSHint domingo, 1 de dezembro de 13
34. Adiciona vendor-prefix ao CSS de acordo com o caniuse.com Autoprefixer npm install grunt-autoprefixer --save-dev domingo, 1 de dezembro de 13
35. autoprefixer : { file : { src : 'dev/css/main.css' } } Autoprefixer domingo, 1 de dezembro de 13
36. Converte um grupo de imagens para sprite e gera seu respectivo CSS Spritesmith npm install grunt-spritesmith --save-dev domingo, 1 de dezembro de 13
37. sprite : { all : { src : 'dev/img/sprites/*.png', destImg : 'dev/img/ico-general.png', destCSS : 'dev/sass/sprites.scss', cssFormat : 'css' } } Spritesmith domingo, 1 de dezembro de 13
38. Válida o nosso HTML de acordo com as especificações do W3C HTML Validation npm install grunt-html-validation --save-dev domingo, 1 de dezembro de 13
39. validation : { options : { reportpath : false, reset : true }, files : { src : ['index.html'] } } HTML Validation domingo, 1 de dezembro de 13
40. Otimiza PNG, GIF e JPEG Imagemin npm install grunt-contrib-imagemin --save-dev domingo, 1 de dezembro de 13
41. imagemin : { dist : { files : [{ expand : true, cwd : 'dev/img', src : ['*', '!/sprites/**'], dest : 'assets/img' }] } } Imagemin domingo, 1 de dezembro de 13
42. Realiza a tarefa somente se o arquivo de origem for mais novo que o arquivo de destino Newer npm install grunt-newer --save-dev domingo, 1 de dezembro de 13
43. grunt.registerTask('image', ['newer:imagemin']); Newer watch : { hinter : { files : ['dev/js/*.js'], tasks : ['newer:jshint'] } } domingo, 1 de dezembro de 13
44. minifica e otimiza o SVG SVGmin npm install svg-min --save-dev domingo, 1 de dezembro de 13
45. SVGmin svgmin : { dist : { files : [{ expand : true, cwd : 'dev/img', src : ['**/*.svg'], dest : 'assets/img', ext : '.svg' }] } } domingo, 1 de dezembro de 13
46. minifica e concatena os arquivos js utilizando o UglifyJS Uglify npm install contrib-uglify --save-dev domingo, 1 de dezembro de 13
47. Uglify uglify : { options : { banner : '/*Curious about the source? Go to /dev instead :)*/' }, my_target : { files : { 'assets/js/main.js': ['dev/js/main.js'] } } } domingo, 1 de dezembro de 13
48. minifica e concatena os arquivos CSS CSSMIN npm install grunt-contrib-cssmin --save-dev domingo, 1 de dezembro de 13
49. CSSMIN cssmin : { task : { options : { banner : '/* My minified css file */' }, files : { 'assets/css/main.css': ['dev/css/main.css'] } } } domingo, 1 de dezembro de 13
50. Limpa pastas e arquivos Clean npm install grunt-contrib-clean --save-dev domingo, 1 de dezembro de 13
51. Clean clean : ['assets/js', 'assets/css'] domingo, 1 de dezembro de 13
52. Troca texto de acordo com strings Replace npm install grunt-replace --save-dev domingo, 1 de dezembro de 13
53. Replace replace : { dist : { options : { patterns : [{ match : /dev\/js\/main.js/, replacement : 'assets/js/main' + randomNumber + '.js', expression : true }] }, files : [{ src : ['index-dev.html'], dest : 'index.html' }] } } domingo, 1 de dezembro de 13
54. Publica arquivos utilizando rsync como protocolo rsync npm install grunt-rsync --save-dev domingo, 1 de dezembro de 13
55. rsync deployRsync : { home : { options : { src : '', dest : 'www/frontinpoa', host : 'admin@frontinpoa.com.br', recursive : true, syncDest : true, exclude : [".git*","node_modules"] } } } domingo, 1 de dezembro de 13
56. Deploy: - Validação HTML, CSS e JS; - Prefixos no CSS; - Otimização de SVG, PNG, JPEG, GIF... - Insumos concatenados e minificados - Cache invalidado - Publicação em produção (Sem FTP!) domingo, 1 de dezembro de 13
57. OBRIGADO! @bazevedo domingo, 1 de dezembro de 13