Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improving WordPress Development Workflow with Grunt

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.

E8d172977181f0f3e105a2f4553cccc2?s=128

Eric Binnion

April 28, 2014
Tweet

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