Over the past year I've adopted quite a few new tools into my everyday development workflow. These include SublimeText, Git, Sass/Compass, and Grunt. After incorporating these into my development process I'm not sure how I ever got anything done without them.
Today I will discuss how I use Grunt in my WordPress Theme development process.
When I first heard about Grunt about a year ago I knew that it was an important tool but I had no idea how to incorporate it into my WordPress projects.
Even though my WordPress development projects usually consists of creating themes and plugins I knew that I needed to incorporate Grunt into my workflow. I love coding and designing so I like to automate tedious processes as much as possible.
It turns out that using Grunt with WordPress is pretty much the same as using it with any other dev project.
Getting Started
I like to place my Gruntfile and package.json files in my theme's directory. That way everything is self-contained and I can move my theme to a new WordPress install more easily. It also makes it easier when committing your theme to GitHub.
Since every WordPress theme requires at least a style.css file, CSS tasks are a must.
CSS Tasks
Since I use Sass I don't need separate tasks to concatenate and minify CSS files. In case you don't use Sass you can still compress CSS files using the grunt-contrib-cssmin package. Concatenating CSS can be tricky so I wouldn't recommend doing this without a preprocessor.