So I learned about this Grunt thing yesterday after I discovered my own “why”: creating WordPress theme to be submitted to WordPress.org manually is an unpleasant experience. Copy the file, remove all the file system such as
.DS_Store, zip it, upload it to WordPress.org, WordPress.org tells me that there’s file system left, repeat the process, well you get the point.
I wish I can automate that process.
And automation is what Grunt is all about. Boy I should’ve learned Grunt way much sooner.
What needs to be done
After spend some time to learn how to use Grunt and what I can use it for, these are things I wish to automate when creating theme’s .zip file for WordPress.org submission:
1. Preparing .pot files for translation
I previously uses Poedit for making .pot files for translation. I don’t quite like what I have to do to make the .pot files:
- Create new project
- Editing project’s properties, adding source keywords
- Updating pot files based from source
- Save as pot files
Nah. Too much steps.
2. Converting readme.md into readme.txt
GitHub uses readme.md for repository description while WordPress.org uses readme.txt. Actually, you can use readme.txt for GitHub repository as well, but it’ll be displayed as this unparsed markdown text:
In comparison, if you use readme.md instead of readme.txt, here’s how it looks. A parsed markdown text:
So the ideal setup would be: having readme.md at the theme’s repository, but when submitting the theme to the repository, it needs to be converted into readme.txt.
Note: Why don’t keep both version? The first reason is it’s repetitive. The second reason is I’ve done that: theme reviewer ended up suggesting me to remove the .md version.
3. Creating .zip file to be submitted
As what I’ve said above: the manual process is repetitive and prone to error of missing some file system which should be deleted.
Here comes the solution: Grunt
- you open terminal
cdto your theme’s directory
You need to setup the task before summoning the task tho. You can read more what Grunt is on its site. There are many tutorial about Grunt for beginner on the web, but I found these three articles are really helpful for me:
- Chris Coyier 2 at 24ways: Grunt for People Who Think Things Like Grunt are Weird and Hard
- Lee Mason at Tuts Plus: Using Grunt with WordPress Development
- Mike Cunsolo at Smashing Magazine: Get Up And Running With Grunt
How I use Grunt (For The Time Being)
I uses my recent theme, Patio, for trying Grunt. After installing grunt on my project folder and installing required npm packages needed (click here to see npm packages I use as dependencies at package.json), here’s how my Gruntfile.js looks:
It basically does what I explained on “What needs to be done” section above. I register two tasks:
release for making .pot file for translation and
build for creating .zip file of the theme.
While the release task is pretty straightforward, these are what
build task does:
- Updating the .pot file
- Removing directory called
/build(if there’s any)
- Copying readme.md into
/builddirectory and convert it into .txt
- Copying the content (files and folders) of the theme except the defined files (basically filesystems) into
- Removing directory called
/release(if there’s any)
/builddirectory into themename.zip and place it inside
After the task is completed, I can open
/release directory, and upload themename.zip file inside it into WordPress.org repository.
That’s pretty much how I use Grunt for preparing theme to be submitted to WordPress.org. Do you have any suggestion to improve it? An early explanation tho: I intentionally not minify and concatenate css/js files for these two reasons:
- Less assets to be registered / deregistered if child theme wants to do so
- I prefer it to be done via caching or optimization plugin.
What’s your thought on it?
Update [April 27th, 2015]
After discussing the code with Satrya through comment section below, apparently there’s the more efficient way for achieving what I intended to do above:
Long story short:
- There’s no need to use two directory (
- Executing copy will do both