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