Gulp pipe files into zip with specific directory

Question

I have two file streams

var chromefiles = gulp.src(['./src/chrome/*', './external/jquery.js',      './icon/*']);

var userscriptfiles = gulp.src(['./src/meta.js', './src/jquery.extensions.js', './src/*.js'])
.pipe(concat('user.js'));

which I merge into a zip file

return merge(chromefiles, userscriptfiles)
.pipe(zip('overpress.zip'))
.pipe(gulp.dest('./'));

I would like to put all files from "chromefiles" into a subdirectory called "chrome" and the file from "userscriptfiles" into a directory called "userscript" inside the zip file. How can I achieve this?

overpress.zip
   |
   |-userscript
   |     |-user.js
   |
   |-chrome
        |-jquery.js
        |-icon.png
        |-someotherfile.js     

Answer 1

Use gulp-rename on the chromefiles and userscriptfiles streams to prepend the respective directory to each file path:

var rename = require('gulp-rename');

gulp.task('zip', function() {
  var chromefiles = gulp.src([
      './src/chrome/*',
      './external/jquery.js',
      './icon/*'
    ])
    .pipe(rename(function(file) {
      file.dirname = 'chrome/' + file.dirname;
    }));

  var userscriptfiles = gulp.src([
      './src/meta.js', 
      './src/jquery.extensions.js', 
      './src/*.js'
    ])
    .pipe(concat('user.js'))
    .pipe(rename(function(file) {
      file.dirname = 'userscript/' + file.dirname;
    }));

  return merge(chromefiles, userscriptfiles)
    .pipe(zip('overpress.zip'))
    .pipe(gulp.dest('./'));
});