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.

Eric Binnion

April 28, 2014
Tweet

More Decks by Eric Binnion

Other Decks in Technology

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