, ,

WordPress Tip: Create theme or plugin ZIP file with Gulp

The way I develop now, I’m using NPM to grab packages, and typically Gulp to handle things like processing my Sass and JavaScript files. Gulp has been a great addition to the dev toolkit, allowing you to handle some repetitive tasks with just the click of a button or a few simple words on the command line.

Recently, I found myself needing to distribute some WordPress Theme and Plugin folders as zip files, which is the standard (read: old school) way to manually add them into WordPress. This is especially still handy for private themes/plugins that aren’t going to be downloaded from WordPress.org.

Here’s a quick tip on how to quickly throw together a zip file with Gulp for your theme or plugin.

Before you begin.

This assumes you’re already using Gulp in your development process, so we’re going to skip all the npm init and npm install stuff for now. If you’re interested in learning more about Gulp, there’s a number of good tutorials online.

The main thing is ensuring that you’ve installed gulp-zip and have required it at the top of your gulpfile.js. The rest of the gulp task is pretty simple:

https://gist.github.com/bacoords/1820d06ab5eee549eadb0fdabe47d28e

Installing gulp-zip will get us most of the way there. But there are a few special things that we want to include to get the most out of this process:

It needs to ignore any configuration files (gulpfile.js, package.json, etc)

This is the easiest to set up. In our gulp.src function we’ll pass an array of source destinations. Just add a quick ‘not’ operator ! in front of any filenames that you’d like to keep out of the zip file.

It needs to ignore all of our node modules and any src folders.

As long as your your compiling all of your source code into final ‘build’ versions, then there’s no reason to distribute your giant node_modules directory or any of your sass files in the final version of your plugin. However, this one takes a little extra finagling. Basically, you need to ignore the directory as well as the contents of the directory- at the same time- using curly brackets: {} and a comma to separate them. So for our example, we’re including {node_modules, node_modules/**/*} to cover both the directory and the contents. We’ll want to do the same for any other src folders.

Here’s a deeper discussion on Github that has an even more concise way to manage this.

It should place our zip file one directory up and not inside our theme folder

Notice how we pass one folder above the root in our gulp.dest using './../'. This places our completed zip file up in our themes or plugins folder (if we’re developing on a local version of WordPress.

Just run gulp zip and you should be good to go.

I’m also thinking about other ways we can enhance this. Perhaps adding the theme version number to the end of the zip filename could be a good next step.

 

Learn Modern WordPress Development

I’m sharing the best resources and tutorials for developers building in and on the block editor.


4 responses to “WordPress Tip: Create theme or plugin ZIP file with Gulp”

  1. grooow Avatar

    Nice! Just what I was looking for

  2. AJ Clarke Avatar

    Thanks! I just switched from Grunt to Gulp and settings everything up, very helpful 😉

    1. Brian Coords Avatar
      Brian Coords

      Awesome! Glad it helped!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.