I recently spent some time building a new WordPress theme and decided to leverage Grunt and Bower in the process. I’m sure there are already some awesome Yeoman generators out there, but I opted to create my own simple setup. I wanted to incorporate Bootstrap and FontAwesome, then add some simple Grunt tasks to compile, minify, etc.
I’ve put my work into a repo called grunt-bower-wordpress that includes the
GruntFile.coffee that you’ll need to get started. If you’d like to give it a try, just run the following to clone the repo and build it:
> git clone firstname.lastname@example.org:justinklemm/grunt-bower-wordpress.git > cd grunt-bower-wordpress > npm install
That’s it! When the
> ./node_modules/.bin/grunt build
There’s also a Grunt command that’ll watch your files and rebuild them when they change. It attempts to refresh your browser using LiveReload. It’s useful while you’re working on your theme. Simply run:
> ./node_modules/.bin/grunt watch
If you ignore all the build-related files in the repo, the setup simply has a
/js directory and a
/less directory. Grunt will concatenate and minify all the *.js files in
/js and output them to
/prod.js (jQuery will automatically be included). It’ll also compile all the *.less files in
/less and output them to
/style.css (Bootstrap and FontAwesome will automatically be included).
I’ve included a gist of the
Gruntfile.coffee below (also included in the repo), so you can get a quick overview of the task setup. Enjoy!