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

    Improving Development Workflow with Grunt JS Eric Binnion - @ebinnion

    Midwestern State University Developer – Crane|West
  2. 2.

    What is Workflow? !   Processes used to get stuff

    done !   Typically repetitive !   Can it be automated?
  3. 3.

    Why Improve Workflow? !   Improves how quickly tasks can

    be completed. !   More time == More money
  4. 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
  5. 7.

    Evolution of my Workflow !   Local development with DesktopServer

    !   Benefits !   Minimize validation !   Preprocessors !   Source controlled !   Build tools !   Cons !   Two codebases !   Tools required for preprocessors
  6. 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
  7. 9.

    The Rise of Preprocessors !   More efficient !  

    Logically break apart files !   Less/Sass to CSS !   JavaScript to CoffeeScript !   Must work locally
  8. 10.
  9. 11.

    Grunt !   JavaScript task runner !   Automation !

    Minification !   Compilation !   Unit testing ! Linting !   Coded config
  10. 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
  11. 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
  12. 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
  13. 19.