Looking for way to copy files in gulp and rename based on parent directory

Question

For each module I have some files that need to be copied over to the build directory, and am looking for a way to minimize the repeated code from this:

gulp.src('./client/src/modules/signup/index.js')
  .pipe(gulp.dest('./build/public/js/signup'));

gulp.src('./client/src/modules/admin/index.js')
  .pipe(gulp.dest('./build/public/js/admin'));

to something like this:

gulp.src('./client/src/modules/(.*)/index.js')
  .pipe(gulp.dest('./build/public/js/$1'));

Obviously the above doesn't work, so is there a way to do this, or an npm that already does this?

Thanks

Breastfeed

Answer 1

The best way is to configure your base when sourcing files, like so:

gulp.src('./client/src/modules/**/index.js', {base: './client/src/modules'})
  .pipe(gulp.dest('./build/public/js/'));

This tells gulp to use the modules directory as the starting point for determining relative paths.

(Also, you can use /**/*.js if you want to include all JS files...)

Bazar

There must be a more dynamic way of doing this - what about when src files come from 2 different directories and you want to preserve their directories in dest? – Moil

@IvanDurst I managed this specific case with the OP (answer) code. using the base config and using the relative path from the gulp file to independent files and ./folder-example/** full folders and files. – Candida

Answer 2

Not the answer, but applicable to this question's appearance in search results.

To copy files/folders in gulp

gulp.task('copy', () => gulp
  .src('index.js')
  .pipe(gulp.dest('dist'))
);

Will

Hmmm... my gulp says this task completes, but the output file does not exist. – Cantor

You've got to return the stream to let Gulp know when the task finishes. – Primo

I'm confused why an answer that says "not the answer" has more upvotes than the accepted answer that does answer the question. I'm not sure we should clutter SO with answers designed to make search engines do some particular thing as opposed to providing answers to the question. I think it's search engines' jobs to make something useful of what they get when they crawl the site. Just my $0.02 – Coneflower

@Coneflower It's a useful service to those who arrive at this question via search engines, regardless of how well the search engine is doing its job. I appreciate it. – Mystagogue

haha just realized this is more popular than the right question or right answer :P – Will

Answer 3

return gulp.src('./client/src/modules/(.*)/index.js')  
  .pipe(gulp.dest('./build/public/js/$1'));

Worked for me !

Alleviator

.. even still, this is the answer. – Will

...so can someone rewrite it so it does work as is, so people coming to this page looking for that exact snippet of code can actually use it? – Moil

So... are parens and $n "backreferences" allowed in src/dest globs? They aren't regexes, afaik. This looks like what I'm looking for but the vinyl-fs docs are rather terse on the .src() and .dest() options and what's allowed in them and how they work. – Coneflower

Answer 4

Use for preserve input directory tree will be preserved.

.pipe(gulp.dest(function(file) {
    var src = path.resolve(SRC_FOLDER);
    var final_dist = file.base.replace(src, '');
    return DIST_FOLDER + final_dist;
}))

Using this, you can put in the src: .src(SRC_FOLDER + '/**/*.js').

The others answers not worked for me (like using base: on src()}, because some plugins flatten the directory tree.

Osset

Answer 5

copy files in parallel

gulp.task('copy', gulp.parallel(
() =>  gulp.src('*.json').pipe(gulp.dest('build/')),
() =>  gulp.src('*.ico').pipe(gulp.dest('build/')),
() =>  gulp.src('img/**/*').pipe(gulp.dest('build/img/')),
)
);

Clinkscales