Use gulp to select and move directories and their files
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?
Solution 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.
Solution 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:
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." Thebase
option does indeed preserve the folder+file structure (as described in the accepted answer), but thebase
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...-
Just to reiterate what does move the files, it's the
glob
patterns:Double-asterisk (
.../**/...
) searches recursively throughout all subfolders, and subfolders' subfolders', etc.Filename.extension asterisks (
.../*.*
) finds files of all names, and all extensions. So I think this part deserves the most emphasis!
The accepted answer changes something else; it adds a prefix of
./
to each path arguments passed togulp.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...