Using gulp.js to Deploy Code

I’ve been using Sage for a little while now to create custom WordPress themes. Sage utilizes technologies like Sass (or Less), Bower, Browsersync, and gulp.js to make designing custom themes much more efficient. The only issue I encountered is that I couldn’t use my typical workflow of deploying code with git, because with gulp.js (as with a 12 factor app) you only commit your non-compiled source to your repository, and then deploy from there.

Ways of Deploying Code

In situations like this, you basically have three ways of getting your code changes deployed to remote servers:

  • Compile the code on your dev machine, and then use FTP or some other means to manually transfer the updated files to the remote machine. This method is time consuming, and error-prone. Far from ideal.
  • Use the remote server itself (staging/production/etc) to handle the build process. This can be a problem if the server doesn’t have a lot of resources, or if you’re like most sysadmins and hate to clutter up your production servers.
  • Use a build server or continuous integration system like Jenkins or Travis CI that watches your git repo for changes, compiles your source, and then deploys the code to remote servers. This approach, generally speaking, is the best. However for smaller projects (eg: designing WordPress themes) using a dedicated build server can be overkill and cost prohibitive.

Using Gulp.js to Deploy Code

Since I didn’t want to use a build server for smaller projects, and using FTP is antiquated and error prone, I had to find a better way; preferably something that was mostly automated, and could be easily integrated into my workflow.

Enter gulp.js. I was already using gulp as a task runner so I wanted to see if it could be extended to allow me to deploy code directly from my dev machine. The following are the results of my effort.

Requirements

0. Install the Needed Gulp Plugins

1. Import the Gulp Plugins

Open (or create) your gulpfile.js, and import the plugins:

2. Create the Gulp Task

The gulp task we’re creating can be viewed or downloaded on GitHub. Below, we’ll go over the task line-by-line.

View on Github

2.1 Define the task:

2.2 Create an array that contains the files/directories/globs that you want to be included in your deploy. These are your “build” or “dist” files (ie: compiled, and production ready).

2.3 Create another array to hold the rsync settings. The settings for gulp-rsync can be found here.

2.4 Add connection settings for your target server. Here, we’re using staging.

2.5 Optionally, add connection settings for your production target.

2.6 Make sure a target server was given before proceeding.

2.7 Pipe the files through to gulp-rsync, but first give a confirmation prompt if the target is production.

2.8 The following is a generic function to handle error messages, since I was unable to find a better way to handle errors in gulp

3. Deploying Code

Now, you can deploy with the following command:

You will likely want to run gulp build --production first, so a better command might be:

Wrapping Up

So, there you have it… an afternoon of hacking and I now have a way to efficiently deploy code changes using gulp.js. A word of caution, though: if you’re working on larger or more complicated projects then it’s probably not the best idea to handle production builds with a task runner on your dev server. Please use a proper build server or CI system.

Have any feedback? I’d love to hear it — leave a comment below!

2 responses to “Using gulp.js to Deploy Code

  1. This is great, but it doesn’t seem to work:

    [23:01:14] Using gulpfile ~/Sites/gulp-deploy/gulpfile.js
    [23:01:14] Starting ‘deploy’…
    [23:01:14] ‘deploy’ errored after 111 μs
    [23:01:14] ReferenceError: path is not defined

Leave a Reply

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