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!

12 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

      1. Hey Miller,

        How did you overcome this. When you said “nevermind, stupid me”, i’m gathering you figured out what you did wrong?

        I’m getting the same error but I cant see where I’m going wrong. Please help!

        Thanks in advance.

  2. Extremely useful – thanks Mike! I copied your gist nearly verbatim and deployed successfully on just my 2nd try. I had been using sftp since WP Engine doesn’t allow SSH access. Now on SiteGround, I knew there had to be a better way to upload dist!

    The only adjustment I made to your script was to add SiteGround’s SSH Port:

    rsyncConf.port = '18765'; // ssh port

    One spot an example could have helped me was the destination path, i.e., don’t include dist at the end.

    rsyncConf.destination = 'www/wp-content/themes/sage'; // path where uploaded files go

  3. was reading about gulp-jenkin. But I don’t find any place where we can give PROD Url.

    Please help if someone know about this?

    WAR – we are able to create successfully using gulp-zip and gulp-war.

  4. Hi, I’m using windows and wnat to make this work but I it seems I can’t here’s my code:

    var gulp = require(‘gulp’);
    var rsync = require(‘gulp-rsync’);

    gulp.task(‘deploy’, function() {
    return gulp.src(‘dist/form.php’)
    .pipe(rsync({
    root: ‘dist’,
    hostname: ‘myhost.com’,
    destination: ‘/test’
    }));
    });

    this is my output
    [18:02:25] Error in plugin ‘gulp-rsync’
    Message:
    Error: rsync exited with code 1
    at ChildProcess. (C:\wamp\www\plantillaTecTest\node_modules\gulp-rsync\rsync.js:110:17)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:850:16)
    at Socket. (internal/child_process.js:323:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:492:12)
    [18:02:25] gulp-rsync: Completed rsync.

    the question is, the server has rsync, I’ve have installed the gulp plugin on my project, Do I need to install rsync over windows too?, If so, how to?

  5. Thank you so much for writing this! I’m in the exact scenario you mentioned – a solo WordPress theme developer, so a CI is overkill for me. I’ve been using Beanstalk until now, but I’ve started cutting costs, and Beanstalk just didn’t justify it’s price tag. Turns out rsync is easy as pie, and I have no idea why I avoided it for so long.

    This is also a lot better than managing deployments with Git, because of submodules, build files, etc. – It’s a lot easier to tell rsync to ignore one set of files, and Git to ignore a different set of files.

Leave a Reply

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

×Mike Everhart

Need Some More Help? Let's Talk!

I'd love to work with you! Fill out the form below to schedule a free consultation to discuss your needs and how I can help.

Need More Help?