Toggle navigation

Plain - Design and Development in Scranton, PAPlain - Design and Development in Scranton, PAPlain Text - The blog of Plain

How to Use Grunt to Package a WordPress Theme

11 December 2015
Colin Devroe
inactive
inactive

Disclaimer: This is a dead simple walkthrough showing how to use Grunt to compress your WordPress theme distribution files into a single zip file. If you’re looking for an elaborate packaging routine that includes linting, tidying, compressing, gzipping, versioning, submitting, or uploading — you won’t find that here. Perhaps some time in the future we’ll write a post about how to do all of these things.

We’re going to assume that you’re using Grunt to build your WordPress theme from source files to a nice and tidy distribution directory. If you’re not using a task manager to do some of these mundane, manual, and tedious tasks you may want to look into doing so for your next project. It saves a lot of time and frustration.

Perhaps your working directory looks something like this:

  • .gitignore
  • dist/
  • src/
  • Gruntfile.js
  • package.json

All files in src/ are processed by Grunt tasks in some way (e.g. LESS or SASS is compiled into CSS, JavaScripts are minified, various files are concatenated, etc) and placed into dist/.

Perhaps you are then manually compressing the contents of dist/ into a theme-name.zip file for distribution and you’d prefer to allow Grunt to do this simple task for you. Is this you? Good! Then this dead simple tutorial may help save you some time.

Step 1: Set up dependancies

We use grunt-contrib-compress to handle this task for us. To get started you can install this plugin in two ways. You can run this on the command line:

npm install grunt-contrib-compress --save-dev

Or, you can add it manually to your package.json file’s devDependancies array:

"devDependencies": { "grunt-contrib-compress": "~0.14.0" }

If you’ve done the latter, do not forget to run sudo npm update to install the node module.

Step 2: Update .gitignore, Create Release Directory

We’re also going to assume you’re using git. If so, add “release” to your .gitignore file so that you do not end up accidentally checking in a release build of your WordPress theme. Then, create a release/ directory in the root of your project.

Step 3: Add Compression Task to your Grunt routine

These are the options we use for our compression routine at Plain:

compress: {
main: {
options: {
    archive: 'release/theme-name.zip'
},
files: [
    {expand: true, cwd: 'dist/', src: ['**']},
]}},

This simple task takes everything in dist/ including all sub-directories and places them into a zip file in the release/ directory. For further instructions and more options please see the information on Github for grunt-contrib-compress.

Now you’ll need to add this task to a routine. We recommend duplicating your default routine and simply placing this compression task at the end of the new one. We call ours “build”.

grunt.registerTask('build', ['clean:build', 'compass', 'copy', 'concat', 'compress']);

When we run grunt build Grunt will execute all of the tasks that we have in our default routine and then create a zip file for release. We do have one slightly adjusted task in that we clean out the release/ directory in addition to our dist/ directory which we always do by default. Hence the clean:build task.

For our current needs for a project we’re working on we do not need to upload this zip file to a specific location or distribute it in any specific way. But from this point Grunt could handle those tasks as well. Perhaps one day we’ll take some time to document those processes as well.

We hope you find this simple routine useful.

Would you like to receive updates from Plain? Subscribe to our mailing list: