Improving WordPress Development Workflow with Grunt

Slides from a presentation at WordCamp Austin 2014. Presentation discussed the benefits of using Grunt and then discussed how Grunt can be implemented into theme development.

Transcript

1. Improving Development Workflow with Grunt JS Eric Binnion - @ebinnion Midwestern State University Developer – Crane|West
2. What is Workflow? !   Processes used to get stuff done !   Typically repetitive !   Can it be automated?
3. Why Improve Workflow? !   Improves how quickly tasks can be completed. !   More time == More money
4. Sample Workflow
5. Slightly Optimized Workflow
6. Evolution of my Workflow !   Hacking Thesis theme & live editing on server !   Benefits !   Quick to fix bug !   Cons !   More prone to error !   Longer to validate changes !   Must manually refresh browser !   Not source-controlled
7. Evolution of my Workflow !   Local development with DesktopServer !   Benefits !   Minimize validation !   Preprocessors !   Source controlled !   Build tools !   Cons !   Two codebases !   Tools required for preprocessors
8. Automating WordPress Development !   Concatenate/Compile JavaScript, Sass, and/or Less !   Reload browser on save !   Sync between development/production !   Deploy to WordPress repository !   Package to zip !   Get latest source from plugins/frameworks
9. The Rise of Preprocessors !   More efficient !   Logically break apart files !   Less/Sass to CSS !   JavaScript to CoffeeScript !   Must work locally
10. CodeKit
11. Grunt !   JavaScript task runner !   Automation ! Minification !   Compilation !   Unit testing ! Linting !   Coded config
12. Getting Started with Grunt !   Install node.js !   Install grunt-cli ! npm install –g grunt-cli !   Configuring directory structure !   Create package.json !   Create gruntfile.js
13. Directory Structure !   Grunt is I/O intensive !   Source to destination
14. Create Package.json file
15. Anatomy of Gruntfile
16. Grunt in the Wild Examples ! WordPress SEO !   Roots Theme !   10up Grunt Theme/ Plugin !   Casper-wp WordPress Specific Plugins !   Grunt-wp-deploy !   Grunt-wp-i8n !   Grunt-wordpress
17. WordPress SEO
18. Grunt vs Gulp !   Configuration file !   2,300+ plugins available !   Synchronous and I/O intensive !   Yeoman support !   Virtual file transformations soon !   Code over config !   300+ plugins available !   Files usually transformed in memory (faster) !   Yeoman support likely to come
19. Examples
20. Large Files