Introducing GruntPress, a boilerplate WordPress project that uses a Grunt workflow.
Working with WordPress locally can be a pain in the ass and GruntPress is a way to make more sense of the workflow. For example, I prefer to code wireframes and design in the browser where I can. The last thing I want to do is have to install WordPress, create a theme, and work with PHP loops while I’m laying things out. It’s so much easier to code in straight HTML and CSS while experimenting with layouts and components, but WordPress makes that rather difficult.
How it’s Organized
GruntPress represents my ideal workflow, which is to start with static development files before processing them to use on a working WordPress installation. In other words, there are two directories located in the root folder, one for
development files and another for
production with Grunt and its tasks installed alongside them.
This file structure allows us to use the
development directory as a playground for static files like HTML wireframes while keeping them separate from our WordPress installation, located in
production. Bower is even installed in the
development/lib directory, making experimentation even easier and more manageable.
Working in Development
development directory is a boilerplate for a simple website. It includes
index.html at the root and a
Run the default
grunt task in shell and Grunt will connect you to a local server, open a new browser window, and start watching your files for changes. Saving a file triggers the browser to refresh automatically for you to view your changes.
Moving Files to Production
GruntPress will prepare your development files and even move them over to the
production directory for you. Run the
process task and GruntPress will do the following:
- Process and concatenate SASS files
- Run Autoprefixr on the output CSS
- Minify the output CSS
- Produce a minified custom Modernizr build based on the features it detects were used
- Compress image files down to their smallest size
Not bad, right?
Now that the files have been processed, we can move to
production with the
move command. Go ahead and check the
production/lib directory. Everything will be there!
There are a few other things GruntPress can do out of the box, but you can read the documentation on GitHub for those little things. The point to get across is that GruntPress is an attempt to help separate the development and production workflows when working with WordPress projects.
You may prefer other tasks, components and resources than the ones GruntPress provides. That’s totally fine. The idea is not to be dogmatic and pretend that all projects are the same and must follow the same workflow. GruntPress simply provides a starting point for scoping that out and can be modified as needed. In fact, I may release a future version with way fewer components and dependencies. Then again, it’s more for me anyone else, so we’ll see.
Please enjoy and feel free to contribute!