Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Improving WordPress Development Workflow with G...

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. 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. Evolution of my Workflow !   Local development with DesktopServer

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

    Logically break apart files !   Less/Sass to CSS !   JavaScript to CoffeeScript !   Must work locally
  8. Grunt !   JavaScript task runner !   Automation !

    Minification !   Compilation !   Unit testing ! Linting !   Coded config
  9. Getting Started with Grunt !   Install node.js !  

    Install grunt-cli ! npm install –g grunt-cli !   Configuring directory structure !   Create package.json !   Create gruntfile.js
  10. 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
  11. 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