Use gulp to select and move directories and their files

Question

I'm currently using gulp to call a bash script that cleans my dist/ directory and moves the appropriate files to the clean directory. I would like this to be done with gulp because I am not sure the script would work on a non *nix file system.
So far, I'm using the gulp-clean module to clean the dist/ directory but when I try to move the required directories and their files to the dist folder, the directories are empty.

var gulp = require('gulp'),
    clean = require('gulp-clean');

gulp.task('clean', function(){
  return gulp.src(['dist/*'], {read:false})
  .pipe(clean());
});

gulp.task('move',['clean'], function(){
  gulp.src(['_locales', 'icons', 'src/page_action', 'manifest.json'])
  .pipe(gulp.dest('dist'));
});

gulp.task('dist', ['move']);

calling gulp dist results in the the dist/ directory being populated with the correct directories but they are all empty

$ ls dist/*
dist/manifest.json

dist/_locales:

dist/icons:

dist/page_action:

How do I copy the directories and their contents to the dist/ folder?

Answer 1

You need to include the base option to src, which will preserve the file structure the way you want:

var filesToMove = [
        './_locales/**/*.*',
        './icons/**/*.*',
        './src/page_action/**/*.*',
        './manifest.json'
    ];

gulp.task('move',['clean'], function(){
  // the base option sets the relative root for the set of files,
  // preserving the folder structure
  gulp.src(filesToMove, { base: './' })
  .pipe(gulp.dest('dist'));
});

---

Also, you are probably going to have trouble down the road if you have all these source files in the root of your project.

If you can, I'd recommend you use a single src/ folder and move all your application-specific files into there. This makes maintenance easier moving forward, and prevents your build-specific files from getting mixed up with your application-specific files.

If you do this, then simply replace all occurrences of ./ with src/ in the example above.

Answer 2

The original question targets only directories (a.k.a. folders) in its gulp.src, i.e. gulp.src(['_locales', ... in this example, _locales is the name of a directory.

The accepted answer uses a glob pattern in its gulp.src to target files anywhere in those directories, i.e. gulp.src(['./_locales/**/*.*', ..., (notice the double-asterisks, and the filename.extension asterisks). The accepted answer works...

...but the accepted answer only emphasizes the base option:

You need to include the base option to src...

I experimented and found:

1. Strictly speaking, it is unnecessary to use the base option to achieve what the OP asked: "...and moves the appropriate files to the clean directory." The base option does indeed preserve the folder+file structure (as described in the accepted answer), but the base option is not sufficient to move the files as the OP asked. Preserving the folder+file structure is probably what the OP expects, so the accepted answer is good, but...

2. Just to reiterate what does move the files, it's the glob patterns:

   1. Double-asterisk (.../**/...) searches recursively throughout all subfolders, and subfolders' subfolders', etc.

   2. Filename.extension asterisks (.../*.*) finds files of all names, and all extensions. So I think this part deserves the most emphasis!

3. The accepted answer changes something else; it adds a prefix of ./ to each path arguments passed to gulp.src. I think that's unnecessary/redundant; if there is no ./, (as in the OP question), the paths are resolved relative to the current directory -- resulting in the same behavior. But maybe it's good practice to be explicit with the ./

Let me know if I'm mistaken...