Introduction to Gulp.js 14: Deploying the Website with Rsync

Stefan Imhoff

This is the 14th of my series Introduction to Gulp.js. Today I will write a task to sync the files of my Jekyll site to my webserver.

A fluffy bunny with a Big Gulp
Jayanta Debnath, BIG GULP!

Deploying the Website

There are a lot of possibilites to get a website on the server. You may use FTP, SFTP, SCP, SCP2, Rsync or Git. I use Rsync because it’s fast and easy to use.

I write another tasks as entry point: deploy


var gulp = require('gulp');

 * Start rsync task
gulp.task('deploy', ['rsync']);

This will just start the rsync task. But I could add more tasks, for example a task, which creates a zip archive of the build and copies it to a backup on my harddrive.

$ npm install --save-dev gulp-rsync@0.0.5


rsync: {
  src: production + '/**',
  options: {
    destination: '~/path/to/my/website/root/',
    root: production,
    hostname: '',
    username: 'user',
    incremental: true,
    progress: true,
    relative: true,
    emptyDirectories: true,
    recursive: true,
    clean: true,
    exclude: ['.DS_Store'],
    include: []

This task will grab all files in my production folder, connect to my server and copy all files recursively to my website root. It will delete old files and just add changes to the server.


var gulp = require('gulp');
var rsync = require('gulp-rsync');
var config = require('../../config').rsync;

 * Copy files and folder to server
 * via rsync
gulp.task('rsync', function() {
  return gulp.src(config.src).pipe(rsync(config.options));


This concludes the series Introduction to Gulp.js. Developing and deploying with Gulp.js is fun.

I like the UNIX philosophy of Gulp.js: Having small files, which do one task and connect these to larger workflows. And because I kept my Gulp.js tasks small, pluggable and easily shareable, I was able to add Gulp.js to my second website in less than five minutes.