gulp-sketch stripping out source file path

[scottnath]

Hi @cognitom,

When gulp-sketch exports images, it does not use the original path of the sketch file when deciding where to save the exported versions. This causes problems in a project which has its sketch files in various locations in a project. So, if we had this structure:

• components
  • component1
    • component1.sketch
  • component2
    • component2.sketch
  • component3
    • component3.sketch

Then when the images are created, if we set up gulp-sketch to store exports in exports, then they get saved like this:

• exports
  • component1.png
  • component2.png
  • component3.png

when instead we would want this:

• exports
  • component1
    • component1.png
  • component2
    • component2.png
  • component3
    • component3.png

As a workaround, I set up our gulp task like this:

const path = require('path');
const tap = require('gulp-tap');
const gulp = require('gulp-help')(require('gulp'));
const sketch = require('gulp-sketch');

/**
 * Export images from a sketch file
 */
gulp.task('sketch', function(){
  let dest;

  return gulp.src('./src/**/*.sketch')
    .pipe(tap((file) => {
      // gulp-sketch strips out destination path
      dest = path.dirname(path.join(file.base, path.relative(file.base, file.path)));

      return file;
    }))
    .pipe(sketch({
      export: 'slices',
      formats: 'png',
    }))
    .pipe(gulp.dest((file) => {
      return `${dest}/sketch-export/`;
    }));
});

The above task then requires the dest variable, created during the flow, to be able to achieve the same directory structure as our app. I do this so that the exported images live in the same directory as the .sketch file, in a subdirectory called sketch-export.

It would be great if there was an option to allow maintaining/recreating the original directory structure in which the sketch files are located.