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

1. iMasters InterCon Dev Wordpress

2. @leobalter

6. • 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

8. w3 total cache?

9. Instalação
•Node.JS + NPM (Node Package
Manager)
•npm install -g grunt-cli
•npm install -g grunt-init

12. 2 arquivos
•Gruntfile.js
•package.json
http://blog.caelum.com.br/automacao-de-build-de-front-end-com-grunt-js/

13. 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

14. package.json
{
"name": "meu-tema",
"version": "0.0.1"
}

15. Preguiça

16. templates
grunt-wp-plugin
grunt-wp-theme

17. 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

19. /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

20. grunt-init wp-theme
npm install

21. grunt

22. grunt watch

24. Links:
• https://mondaybynoon.com/grunt-
wordpress-theme-development/
• http://10up.com/blog/grunt-for-wordpress/
• http://mattbanks.me/grunt-wordpress-
development-deployments/