Automate your WordPress Workflow with Grunt.js
3 likes2,848 views
This document discusses using Grunt.js to automate WordPress development workflows. Grunt allows automating repetitive tasks like compiling CSS and JavaScript, running linting tools, concatenating and minifying files, generating sprites, deploying code, and live reloading browsers. It uses plugins maintained in GitHub repositories to perform these tasks. The document provides steps to set up a Grunt-based development environment, including installing Node.js, creating a package.json, installing Grunt and plugins, and configuring a Gruntfile. It also discusses options for using Grunt within WordPress themes and plugins or for an entire WordPress site.
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
- 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 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. fancy trick to autoload all grunt plugins Gruntfile.js — the secret sauce (example from http://mattbanks.me/grunt-wordpress-development-deployments/)
- 18. WordPress
- 20. This is not ideal...
- 21. For theme and plugin development, keep grunt stuff in the theme/plugin folder
- 22. 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
- 23. 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
- 24. Let’s do it live...
- 25. Other Tools ● Bower ● Composer ● Yeoman ● roots.io ● WP Stack
- 26. Questions? Josh Lee www.joshuamlee.com [email protected] @joshleecreates