feat: add backup image generator task

[joemidi]

After running gulp prod and seeing the test failures for backup-images, run gulp backups to start a task that will take a backup.jpg at the end of the banner.timeline();

It should be configurable so you can add in timeline labels to seek to an exact point in your timeline that you want to take the screenshot (at the end of the banner.timeline();).

You might also want to remove/hide elements from the DOM so that they are not captured in the screenshot.

backup.jpg should be saved back into src/**/images/ and ignore any that already exist.

[joemidi]

Requires some testing on a few live projects: e6fb91e and better error handling.

gulp.task('backup-generator', function() {
  return gulp.src([config.publicDirectory + '/**/*.html', '!' + config.publicDirectory + '/index.html'])
    .pipe(backupGenerator({
      root: config.publicDirectory,
      dest: config.sourceDirectory,
      position: 10,
      hideObjects: ['replay', 'cta'],
      errorIfJSException: true,
      quality: 75,
      streamType: 'jpg',
      renderDelay: 5000
    }))
    .on('error', handleErrors);
});

The root is set to the public directory, as we are using that to launch a webkit browser using PhantomJS, and the dest is the source directory because we want to save our JPGs back to our original source files.

The position option will hook into the banner.timeline.seek(position); function, so will use anything that is valid with TimelineLite, time in seconds, or labels as strings.

You can also used hideObjects option to autoAlpha: 0 objects that you don't want to appear when the shot is being taken, these should be strings within an array.