GruntJS + Wordpress

2,253 views

Published on

Apresentação feita no Intercon Dev Wordpress em 2013.

Published in: Technology

GruntJS + Wordpress

  1. 1. iMasters InterCon Dev Wordpress
  2. 2. @leobalter
  3. 3. • Concatena JS e CSS • Minimiza JS e CSS • JSHint / JSLint • Sass / LESS / Compass • LiveReload • Testes Unitários JS (QUnit, Jasmine, etc) • etc, etc, etc Automação
  4. 4. w3 total cache?
  5. 5. Instalação •Node.JS + NPM (Node Package Manager) •npm install -g grunt-cli •npm install -g grunt-init
  6. 6. 2 arquivos •Gruntfile.js •package.json http://blog.caelum.com.br/automacao-de-build-de-front-end-com-grunt-js/
  7. 7. module.exports = function(grunt) {   grunt.initConfig({      uglify: {         'build/home.js': 'src/home.js',         'build/main.js': 'src/main.js'        }   });     // carrega plugins   grunt.loadNpmTasks('grunt-contrib-uglify'); }; Gruntfile.js
  8. 8. package.json {   "name": "meu-tema",   "version": "0.0.1" }
  9. 9. Preguiça
  10. 10. templates grunt-wp-plugin grunt-wp-theme
  11. 11. git clone git@github.com:10up/grunt-wp-plugin.git ~/.grunt-init/wp-plugin git clone git@github.com:10up/grunt-wp-theme.git ~/.grunt-init/wp-theme
  12. 12. /assets .. /css .. .. /src .. .. /sass .. /js .. .. /src /images .. /src /includes /languages .. theme.pot footer.php functions.php header.php humans.txt index.php screenshot.png style.css
  13. 13. grunt-init wp-theme npm install
  14. 14. grunt
  15. 15. grunt watch
  16. 16. Links: • https://mondaybynoon.com/grunt- wordpress-theme-development/ • http://10up.com/blog/grunt-for-wordpress/ • http://mattbanks.me/grunt-wordpress- development-deployments/

×