Automate your WordPress Workflow with Grunt.js

  • View

  • Download

Embed Size (px)


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

Text of Automate your WordPress Workflow with Grunt.js

  • 1. Grunting WordPress Automate your WordPress development workflow with Grunt.js
  • 2. Josh Lee Owner & Lead Developer / QC Creative @joshleecreates
  • 3. Why Grunt? What can it do for me?
  • 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. Grunt uses Plugins
  • 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. Step 1 Install Node.js & NPM: http://nodejs. org/
  • 8. Step 2 Make a basic package.json
  • 9. A basic pa
  • 10. Install the Grunt-CLI globally
  • 11. Install grunt in your project folder
  • 12. Using --save-dev automatically updates package.json
  • 13. Install some plugins (with --save-dev)
  • 14. All NPM packages (Grunt and its 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. fancy trick to autoload all grunt plugins Gruntfile.js the secret sauce (example from
  • 16. from
  • 17. WordPress
  • 18. This is not ideal...
  • 19. For theme and plugin development, keep grunt stuff in the theme/plugin folder
  • 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. 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. Lets do it live...
  • 23. Other Tools Bower Composer Yeoman WP Stack
  • 24. Questions? Josh Lee @joshleecreates