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

    View full-size slide

  2. What is Workflow?
    !   Processes used to get stuff
    done
    !   Typically repetitive
    !   Can it be automated?

    View full-size slide

  3. Why Improve Workflow?
    !   Improves how quickly tasks can be completed.
    !   More time == More money

    View full-size slide

  4. Sample Workflow

    View full-size slide

  5. Slightly Optimized Workflow

    View full-size slide

  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

    View full-size slide

  7. Evolution of my Workflow
    !   Local development with DesktopServer
    !   Benefits
    !   Minimize validation
    !   Preprocessors
    !   Source controlled
    !   Build tools
    !   Cons
    !   Two codebases
    !   Tools required for preprocessors

    View full-size slide

  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

    View full-size slide

  9. The Rise of Preprocessors
    !   More efficient
    !   Logically break apart files
    !   Less/Sass to CSS
    !   JavaScript to CoffeeScript
    !   Must work locally

    View full-size slide

  10. Grunt
    !   JavaScript task runner
    !   Automation
    ! Minification
    !   Compilation
    !   Unit testing
    ! Linting
    !   Coded config

    View full-size slide

  11. Getting Started with Grunt
    !   Install node.js
    !   Install grunt-cli
    ! npm install –g grunt-cli
    !   Configuring directory structure
    !   Create package.json
    !   Create gruntfile.js

    View full-size slide

  12. Directory Structure
    !   Grunt is I/O intensive
    !   Source to destination

    View full-size slide

  13. Create Package.json file

    View full-size slide

  14. Anatomy of Gruntfile

    View full-size slide

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

    View full-size slide

  16. WordPress SEO

    View full-size slide

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

    View full-size slide