javascript - Override files from a second source in Gulp -

i have directory structure so;

foo/   - main.css   - widgets.css   - theme.css bar/   - theme.css   - tinymce.css 

what want achieve in gulp create stream contains files in foo/ (as in "foo/**/*.css"), , merges them contents of bar/ files don't exist in other added, , files exist in other overwritten.

in end, should have stream contains;

foo/main.css foo/widgets.css bar/theme.css bar/tinymce.css 

bar/tinymce.css has been added, , bar/theme.css replaced foo/theme.css. should work subfolders within foo or bar.

how achieve this? looked @ few merge packages gulp seem add files, , never replace them.

there multiple ways it. following gulpfile combine directories a , b final such that:

1. if file exists in b this file appears in final.

2. if file exists in a not in b, file appears in final.

in effect, files in b "override" in a, , b can contain files additional in a.

the core of solution use map method event-stream process each vinyl file passes through stream , decide it. note following code treats problems creating vinyl file "does not exist". may want check errors in detail if want distinguish permission errors files missing.

import gulp "gulp"; import es "event-stream"; import debug "gulp-debug"; import vinylfile "vinyl-file"; import fs "fs"; import path "path";  gulp.task("default", (callback) => {     const a_path = "a/";     const b_path = "b/";      // add forward slash comparison later works.     const b_absolute = path.resolve(b_path) + "/";      return gulp.src([path.join(a_path, "**"),                      path.join(b_path, "**")], { nodir: true })         .pipe(debug({title: "before"}))         .pipe(es.map((file, callback) => {             // want files in b.             if (file.base === b_absolute) {                 callback(null, file);                 return;             }              // files in a, want not             // exist in b.             vinylfile.read(                 path.join(b_path, file.relative), {base: b_path},                 (err, override) => {                     // not exist in b, want it.                     // errors interpreted "does not exist".                     if (err) {                         callback(null, file);                         return;                     }                      // exists in b, don't want it.                     callback();                 });         }))         .pipe(debug({title: "after"}))         .pipe(gulp.dest("final")); }); 

(in case needs said: code above conforms es6. if name file gulpfile.babel.js , install babel or babel-core, you'll able run file.)

if have following setup:

$ find -type f | xargs -n1 -t cat cat a/three  cat a/two  cat a/one  cat a/four   $ find b -type f | xargs -n1 -t cat cat b/two  b cat b/five  b cat b/four  b 

and run gulpfile above, get:

$ gulp [11:36:10] failed load external module babel-core/register [11:36:10] requiring external module babel/register [11:36:10] using gulpfile /tmp/t12/test2.babel.js [11:36:10] starting 'default'... [11:36:10] before a/four [11:36:10] before a/one [11:36:10] after a/one [11:36:10] before a/three [11:36:10] after a/three [11:36:10] before a/two [11:36:10] before b/five [11:36:10] after b/five [11:36:10] before b/four [11:36:10] after b/four [11:36:10] before b/two [11:36:10] after b/two [11:36:10] before 7 items [11:36:10] after 5 items [11:36:10] finished 'default' after 37 ms 

and if inspect final:

$ find final -type f | xargs -n1 -t cat cat final/three  cat final/two  b cat final/one  cat final/five  b cat final/four  b