Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Automate your WordPress Workflow with Grunt.js

2,041 views

Published on

A 20-minute introduction on using grunt.js to optimize your WordPress development workflow

Published in: Internet
  • Be the first to comment

Automate your WordPress Workflow with Grunt.js

  1. 1. Grunting WordPress Automate your WordPress development workflow with Grunt.js
  2. 2. Josh Lee Owner & Lead Developer / QC Creative @joshleecreates
  3. 3. Why Grunt? What can it do for me?
  4. 4. All the repetitive chores... ● Compile LESS, SASS, Stylus, CoffeeScript, etc. ● JSHint / JSLint ● Concatenate and minify scripts and styles ● Run with different settings for development and “builds” ● Automatically generate sprite sheets ● Deploy using git, ftp, scp or rsync ● Live reload in the browser ● Compress images
  5. 5. Grunt uses Plugins
  6. 6. “contrib-” = officially maintained ● contrib-watch ● contrib-jshint ● contrib-clean ● contrib-copy ● contrib-uglify ● contrib-imagemin ● contrib-concat ● contrib-less ● contrib-sass ● contrib-compass ● contrib-stylus ● contrib-livereload ● contrib-cssmin ● contrib-htmlmin
  7. 7. Step 1 Install Node.js & NPM: http://nodejs. org/
  8. 8. Step 2 Make a basic package.json
  9. 9. A basic pa
  10. 10. Install the Grunt-CLI globally
  11. 11. Install grunt in your project folder
  12. 12. Using “--save-dev” automatically updates package.json
  13. 13. Install some plugins… (with --save-dev)
  14. 14. All NPM packages (Grunt and it’s plugins) get installed in `node_modules/` Add this directory to .gitignore to prevent repo bloat New developers can install all dependencies with `npm install` in the project dir
  15. 15. fancy trick to autoload all grunt plugins Gruntfile.js — the secret sauce (example from http://mattbanks.me/grunt-wordpress-development-deployments/)
  16. 16. from http://justinklemm.com/grunt-bower-wordpress-themes/
  17. 17. WordPress
  18. 18. This is not ideal...
  19. 19. For theme and plugin development, keep grunt stuff in the theme/plugin folder
  20. 20. Supercharge your whole site ● Use one Gruntfile for the entire site ● Combine CSS and JS from multiple plugins and your theme — speeds up your site! Best when: ● you have complete control over site code ● you want to use grunt for deployment
  21. 21. Grunt stuff is in the top-level folder with the other developer files This whole folder can be safely deployed without writing out long lists of ignored files for your deploy system WordPress in a subdirectory
  22. 22. Let’s do it live...
  23. 23. Other Tools ● Bower ● Composer ● Yeoman ● roots.io ● WP Stack
  24. 24. Questions? Josh Lee www.joshuamlee.com josh@qccreative.com @joshleecreates

×