copying files with gulp

Question

I have an app. My app source code is structured like this:

./
  gulpfile.js
  src
    img
      bg.png
      logo.png
    data
      list.json
    favicon.ico
    web.config
    index.html
  deploy

I am trying to use Gulp to copy two files: ./img/bg.png and ./data/list.json. I want to copy these two files to the root of the deploy directory. In other words, the result of the task should have:

./
  deploy
    imgs
      bg.png
    data
      list.json

How do I write a Gulp task to do this type of copying? The thing that is confusing me is the fact that I want my task to copy two seperate files instead of files that fit a pattern. I know if I had a pattern, I could do this:

var copy = require('gulp-copy');
gulp.task('copy-resources', function() {
  return gulp.src('./src/img/*.png')
    .pipe(gulp.dest('./deploy'))
  ;
});

Yet, I'm still not sure how to do this with two seperate files.

Thanks

Answer 1

You can create separate tasks for each target directory, and then combine them using a general "copy-resources" task.

gulp.task('copy-img', function() {
  return gulp.src('./src/img/*.png')
    .pipe(gulp.dest('./deploy/imgs'));
});

gulp.task('copy-data', function() {
  return gulp.src('./src/data/*.json')
    .pipe(gulp.dest('./deploy/data'));
});

gulp.task('copy-resources', ['copy-img', 'copy-data']);

Answer 2

You could also use merge-stream

Install dependency:

npm i -D merge-stream

Load the depedency in your gulp file and use it:

const merge = require("merge-stream");

gulp.task('copy-resources', function() {
  return merge([
      gulp.src('./src/img/*.png').pipe(gulp.dest('./deploy/imgs')),
      gulp.src('./src/data/*.json').pipe(gulp.dest('./deploy/data'))
  ]);
});