A 20-minute introduction on using grunt.js to optimize your WordPress development workflow
Text of Automate your WordPress Workflow with Grunt.js
1. Grunting WordPress Automate your WordPress development workflow with Grunt.js
2. Josh Lee Owner & Lead Developer / QC Creative @joshleecreates
3. Why Grunt? What can it do for me?
4. All the repetitive chores... Compile LESS, SASS, Stylus, CoffeeScript, etc. JSHint / JSLint Concatenate and minify scripts and styles Run with different settings for development and builds Automatically generate sprite sheets Deploy using git, ftp, scp or rsync Live reload in the browser Compress images
12. Using --save-dev automatically updates package.json
13. Install some plugins (with --save-dev)
14. All NPM packages (Grunt and its plugins) get installed in `node_modules/` Add this directory to .gitignore to prevent repo bloat New developers can install all dependencies with `npm install` in the project dir
15. fancy trick to autoload all grunt plugins Gruntfile.js the secret sauce (example from http://mattbanks.me/grunt-wordpress-development-deployments/)
16. from http://justinklemm.com/grunt-bower-wordpress-themes/
18. This is not ideal...
19. For theme and plugin development, keep grunt stuff in the theme/plugin folder
20. Supercharge your whole site Use one Gruntfile for the entire site Combine CSS and JS from multiple plugins and your theme speeds up your site! Best when: you have complete control over site code you want to use grunt for deployment
21. Grunt stuff is in the top-level folder with the other developer files This whole folder can be safely deployed without writing out long lists of ignored files for your deploy system WordPress in a subdirectory
22. Lets do it live...
23. Other Tools Bower Composer Yeoman roots.io WP Stack
24. Questions? Josh Lee www.joshuamlee.com firstname.lastname@example.org @joshleecreates