GruntPress
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
The development directory is a boilerplate for a simple website. It includes index.html at the root and a lib subdirectory that houses all Bower components, fonts, images, Javascripts and SASS/CSS files needed to build the foundation for a website.
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:
- Concatenate Javascript files
- Minify the output concatenated Javascript file
- 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!
Wrapping Up
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!