Recently I was introduced to Grunt as a fantastic automation tool for a project I was working on at the office. We were using Grunt to compile Dust templates, LESS files and create build packages for the project. Having only used LESS compiler apps, I was amazed at how easily it was to get Grunt working once I figured out how the configuration file, or “Gruntfile” needed to be setup.
I began using Grunt and it’s “watch” package for any project that justified it (any project that takes more than a day to complete). I write my CSS exclusively in LESS now, so I was finding great success with Grun, and then started adding different pieces, a JST compiler for my Backbone projects here, some JS validation with JSHint there… Grunt was a great tool that was really making my life much easier as I developed. This eventually led me to Yeoman.
Yeoman is a tool that can be used to greatly improve the overall workflow of a project. It makes use of Grunt, for building and deploying your project, with Bower, which is used to easily download and manage your scripts.
Yeoman works by reading a script, known as a generator, and then automates the workflow you would generally need to do manually.
Yeoman intrigued me greatly, and working on so many WordPress projects, eventually led me to a WordPress Generator for Yeoman. I checked this project out, and liked what I saw, but it was missing something. It would download the latest stable version of WordPress for me, and it would install the Underscores starter theme for me, which was great, but I wanted more. I’ve added a few extra snippets, and intend to add more to it as time goes on.
Sure, Yeoman is designed for scaffolding out web application friend, but it’s not limited to only the front end, so I set out and created a customized version of the WordPress generator, mainly getting me to the starting point of most of my WordPress projects.
The customized generator is setup to do the following:
- Download the most recent version of WordPress
- Download the most recent version of the customized Underscores Theme for REDspace projects
- Download the most recent version of the Twitter Bootstrap
- Download the most recent version of Font Awesome
- Download the most recent version of LESS Elements
- Uncompress WordPress to the “app” directory
- Uncompress the other projects to the “src” directory
- Clean up the “src” directory so that only the files I want are set up nicely for me
- Create a basic style.less for my WordPress project
- Create a Gruntfile that is setup to watch the LESS file and compiles it to the proper directory in the WordPress theme
- Run ‘npm install’ to download and install the Grunt Dependencies
- Set up the database table that WordPress will be installed to
- Use wp-cli to run the WordPress install automatically
Make sure you have Yeoman installed, read more about that here: http://yeoman.io/gettingstarted.html.
Next, create a directory for your WordPress project and assign the appropriate permissions. Navigate to that directory and run
$ npm install -g generator-yo-trs-wordpress
This will install the Yeoman generator for the REDspace WordPress setup. Next, run the generator by typing
$ yo yo-trs-wordpress
You’ll be prompted for the WordPress version you wish to use (most recent by default), the name of your theme, some theme settings, and also your database credentials so the database can be created. Please ensure that your database server is running, as at the moment I have not built a lot of error checking into the generator.
After you’re done you’ll be able to navigate to the install url, install WordPress, and voila, you’ll be good to go!
You can also create a new plugin by running
$ yo yo-trs-wordpress:plugin
This is taken directly from the original WP generator and uses the WordPress Plugin Boilerplate to generate the skeleton code for your plugin.
When I originally wrote this post, I was hoping to integrate with wp-cli to actually run the WordPress install and activate the theme automatically. I was also like to have Grunt automatically create an initial build of the style.css file and I should move the font and js directories to the appropriate spot in the theme directory. Well, because it took me so long to get this post written, both of these features are now working.
If you want to check out the code for yourself, and customize it to your liking, it’s available on GitHub.