How to copy multiple files and keep the folder structure with Gulp

Question

I am trying to copy files from one folder to another folder using Gulp:

gulp.task('move-css',function(){
  return gulp.src([
    './source/css/one.css',
    './source/other/css/two.css'

    ]).pipe(gulp.dest('./public/assets/css/'));
});

The above code is copying one.css & two.css to the public/assets/css folder.

And if I use gulp.src('./source/css/*.css') it will copy all CSS files to the public/assets/css folder which is not what I want.

How do I select multiple files and keep the folder structure?

@lal css files can be at different folders so regular expression is not useful in this case IMHO — NullPoiиteя, May 06 '15 at 05:33
is the issue is like files in multiple folders are copied to the one folder `public/assets/css` ? — Anulal S, May 06 '15 at 05:38

score 158 · Accepted Answer · edited Dec 19 '19 at 03:29

158

To achieve this please specify base.

¶ base - Specify the folder relative to the cwd. Default is where the glob begins. This is used to determine the file names when saving in .dest()

In your case it would be:

gulp.task('move-css',function(){
  return gulp.src([
      './source/css/one.css',
      './source/other/css/two.css'
  ],  {base: './source/'}) 
  .pipe(gulp.dest('./public/assets/'));
});

Folder structure:

.
├── gulpfile.js
├── source
│   ├── css
│   └── other
│       └── css
└── public
    └── assets

edited Dec 19 '19 at 03:29

Bitswazsky

4,242
3
29
58

answered May 06 '15 at 05:44

Anulal S

6,534
5
26
33

24

If your files have completely different directory structures (e.g. `['./lib/one.js', './models/two.js']`) you can add `{base: '.'}` to make it keep their entire structure. – Tim Jan 23 '16 at 16:55
How to parse every files, folders and subfolders in src ? – Reign.85 Sep 22 '16 at 10:22
1

please check src with double ** `gulp.src('**/*.*')` – Anulal S Sep 22 '16 at 10:38

score 1 · Answer 2 · edited Jun 28 '19 at 17:13

I use gulp-flatten and use this configuration:

var gulp = require('gulp'),
    gulpFlatten = require('gulp-flatten');

var routeSources = {
  dist:  './public/',
  app: './app/',
  html_views: {
    path: 'app/views/**/*.*',
    dist: 'public/views/'
  }
};

gulp.task('copy-html-views', task_Copy_html_views);
function task_Copy_html_views() {
  return gulp.src([routeSources.html_views.path])
      .pipe(gulpFlatten({ includeParents: 1 }))
      .pipe(gulp.dest(routeSources.html_views.dist));
}

And there you can see the documentation about gulp-flatten: Link

score -3 · Answer 3 · edited Jul 06 '20 at 08:53

-3

   gulp.task('move-css',function(){
      return gulp
                  .src([ 'source/**'], { base: './' })
                  .pipe(gulp.dest('./public/assets/css/'));
    });

Your own code didn't include the entire dir tree of source 'source/**' and the base {base:'./'} when calling to gulp.src which caused the function to fail. The other parts where fine.

gulp.task('move-css',function(){
  return gulp.src([
    './source/css/one.css',
    './source/other/css/two.css'

    ]).pipe(gulp.dest('./public/assets/css/'));
});

edited Jul 06 '20 at 08:53

shahar_m

3,461
5
41
61

answered Jul 04 '20 at 21:34

Kingsolo50

63
1
3

SO frowns on code only Answers. For long term value, helping future visitors learn and apply this knowledge to their own issues, and to increase chances of upvotes, consider adding explanations, highlighting pets of you answer that addresses OP's issue, to your answers. – SherylHohman Jul 05 '20 at 23:14

How to copy multiple files and keep the folder structure with Gulp

3 Answers3

Linked

Related