Automatizando tarefas no WordPress com GruntJS

Palestra sobre GruntJS para WordCamp Porto Alegre. Os arquivos dessa apresentação estão em: https://github.com/fdaciuk/talks/tree/master/2013/wordcamp-porto-alegre

Transcript

1. Automatizando tarefas no WordPress com GruntJS @fdaciuk
2. FERNANDO DACIUK Frontend Engineer about.me/fdaciuk twitter.com/fdaciuk fb.com/fdaciuk github.com/fdaciuk
4. O que é GruntJS? Pra quê ele serve? Porque ele foi escrito em Javascript? Tenho medo de Javascript!
5. Ferramentas similares
6. Javascript Task Runner
7. AUTOMAÇÃO do seu trabalho
8. ÓÓÓÓÓÓÓÓÓHHH! QUE LEGAAAAAAL! E como começo a usar?
9. http://nodejs.org/download/
10. INSTALAÇÃO DO GRUNTJS: sudo npm install -g grunt-cli
11. 2 arquivos package.json { “name” : “project_name”, “version” : “1.0.0”, “title” : “Project Title”, “homepage” : “http://www.seusite.com.br” } Gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ // Suas tasks aqui }); };
12. Minificar CSS Instalando Plugins no GruntjS [sudo] npm install --save-dev grunt-contrib-cssmin Talvez precise, talvez não. Instala o módulo Salva nas dependências do package.json Plugin que será instalado
13. Quais plugins eu posso instalar? Quem são eles? Onde encontrá-los? http://gruntjs.com/plugins
14. $ grunt cssmin Gruntfile.js Terminal module.exports = function( grunt ) { grunt.initConfig({ cssmin : { combine : { files : { ‘style.css’ : [ ‘assets/css/style.css’ ] } } } // cssmin }); grunt.loadNpmTasks( ‘grunt-contrib-cssmin’ ); }; Configurando a Task no Gruntfile.js
15. Minificar JS Gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ uglify : { options : { mangle : true }, js : { files : { ‘assets/js/main.js’ : [ ‘assets/_js/scripts.js’ ] } } } // uglify }); grunt.loadNpmTasks( ‘grunt-contrib-uglify’ ); }; $ grunt uglify Terminal
16. Executando mais de uma Task
17. Executando mais de uma Task Gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ ... }); grunt.loadNpmTasks( ‘grunt-contrib-cssmin’ ); grunt.loadNpmTasks( ‘grunt-contrib-uglify’ ); // Task default grunt.registerTask( ‘default’, [ ‘cssmin’, ‘uglify’ ] ); }; $ grunt Terminal
18. Dá pra usar variáveis no GruntJS. Mostrar como chamar uma variável no GruntJS. Mostrar o banner do uglify e a dica do comentário com ! para não remover ao minificar. Melhorando o Gruntfile.js Usando variáveis Gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ assets_path : ‘assets’, css_src : ‘<%= assets_path %>/css’, js_src : ‘<%= assets_path %>/_js’, js_build : ‘<%= assets_path %>/js’, cssmin : { combine : { files : { ‘style.css’ : [ ‘<%= css_src %>/style.css’ ] } } }, // cssmin ... }); };
19. Dá pra usar variáveis no GruntJS. Mostrar como chamar uma variável no GruntJS. Mostrar o banner do uglify e a dica do comentário com ! para não remover ao minificar. Melhorando o Gruntfile.js Separando as Tasks: Gruntfile.js head_scripts : { files : { ‘<%= js_build %>/head-scripts.js’ : [ ‘<%= js_src %>/lib/modernizr.js’ ] } }, js : { files : { ‘<%= js_build %>/main.js’ : [ ‘<%= js_src %>/scripts.js’ ] } } $ grunt uglify:head_scripts Terminal
20. Dá pra usar variáveis no GruntJS. Mostrar como chamar uma variável no GruntJS. Mostrar o banner do uglify e a dica do comentário com ! para não remover ao minificar. Melhorando o Gruntfile.js Pegando dados do package.json: Gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ pkg : grunt.file.readJSON( ‘package.json’ ), banner : ‘/*! <%= pkg.name %> - v<%= pkg.version %> - ’ + ‘<%= grunt.template.today( “yyyy-mm-dd” ) %> */’, uglify : { options : { banner : ‘<%= banner %>’ }, ... }, // uglify ... }); };
21. Os plugins mais irados para GruntJS
22. Os plugins mais irados para GruntJS grunt-contrib-concat
23. Os plugins mais irados para GruntJS grunt-contrib-compass
24. Os plugins mais irados para GruntJS grunt-smushit
25. Os plugins mais irados para GruntJS grunt-contrib-jshint
26. Os plugins mais irados para GruntJS grunt-notify
27. Os plugins mais irados para GruntJS grunt-contrib-watch
28. Os plugins mais irados para GruntJS grunt-rsync
29. Os plugins mais irados para GruntJS grunt-ftp-deploy
30. Os plugins mais irados para GruntJS grunt-curl
32. PENSE FORA DA CAIXA
33. DÚVIDAS?
34. github.com/fdaciuk/talks Obrigado!