Whether or not you make it to WordCamp Seattle, you too can benefit from merging Grunt into your WordPress development workflow!
A best-practice in web development is to keep JS and CSS to a minimum by merging multiple files and minifying that file so it downloads quickly. This is a tedious process for many, and easily forgotten during a manual release packaging process.
Grunt is a local development tool that helps optimize this workflow, empowering developers and designers to focus on what they do best. It streamlines both active development and the final release process when pushing code to production.
Grunt plays well with WordPress – there are even tools available to kickstart your new project with minimum configuration.
Best Practices
There are a couple of best practices that apply to making both JavaScript and CSS performant for site visitors:
- Minimize the number of requests
- Minimize the size of downloaded files
There are also some best practices for making scripts and styles easy for developers to work with:
- Make JavaScript function and variable names descriptive
- Keep code modular, rather than in one, large, monolithic file
- Include copious in-line documentation
Unfortunately, these best practices are contradictory – which sucks. Optimizing code for developers makes for a horrible visitor experience. Optimizing for visitors makes continued development difficult.
One workaround is to routinely minify and concatenate your source files, keeping both the original development files available but making optimized files available for release. This works – except for the fact that it can be time consuming and is often a forgotten step in your release process.
Grunt can make this development workflow far less sucky.
Grunt
Grunt is a task runner. You queue up a series of tasks in JavaScript and Grunt runs them for you as often as necessary. You can lint your script and stylesheet files. You can concatenate and minify multiple files. You can process Sass or LESS source files into CSS. You can even run unit tests.
There are hundreds of tasks in the average developer’s workflow that eat 2 minutes here and 5 minutes there. Many of these tasks can be scripted and handled and automated by Grunt, meaning you’re free to actually develop rather than waste time doing busywork.
Moving Forward
To make WordPress development a bit easier, the 10up team has built a set of Grunt project templates to kickstart new themes and plugins. These templates build out your project, setting up a standard directory structure, the initial file tree, and even creating a Gruntfile you can use to script further tasks within your project.
This makes starting a new WordPress project a matter of answering a few questions, rather than remembering which files go where and how to configure Grunt to work with them. The next step is to start building – with the enhanced ability to script various tasks within your project as you go.
