Gulp.dest does not create destination folder

Question

My gulp code looks like this, partially

gulp.src(['../application-base/**/**.js', '!../application-base/assets/**/**.js'], { base: './' }) .pipe(gulpPlumber({ errorHandler: function (error) { console.log(`\nError ${error}`); this.emit('end'); } })) .pipe(gprint(filePath => "Transpiling: " + filePath.replace('..\\application-base\\', ''))) .pipe(babel({ compact: false })) .pipe(gulp.dest('../application-base-transpiled/')) .on('end', () => done()); 

If i change

.pipe(gulp.dest('../application-base-transpiled/'))

to

.pipe(gulp.dest(''))

then files with the extension are created and overwrite the originals. The problem is that

.pipe(gulp.dest('../application-base-transpiled/'))

does not save the file with the same source path in application-base-transpiled

As you can see, I am using a database that seems to work differently.

What am I missing?

EDIT

I looked more closely, and it seems even with

.pipe(gulp.dest('../application-base-transpiled/'))

Gulp still places the transferred files in the original location, overwriting the original. There is something about what I convey that gulp does not like, and ignores silently.

EDIT 2

Removing the base option seems to solve this problem, unlike the recommendations I saw elsewhere. The docs for gulp.dest don't really discuss this.

Can someone explain this?

EDIT 3

Reply Per Sven, I tried this

 gulp.src(['**/**.js', '!assets/**/**.js'], { base: '../application-base' }) .pipe(gulpPlumber({ errorHandler: function errorHandler(error) { console.log('\nError ' + error); this.emit('end'); } })) .pipe(gprint(filePath => "Transpiling: " + filePath.replace('..\\application-base\\', ''))) .pipe(babel({ compact: false })) .pipe(gulp.dest('../application-base-transpiled/')) .on('end', () => done()); 

But it seems that the database is being ignored, and files from my current current directory are being captured and transferred to the place (the last thing I want - fortunately, GIT was useful for undoing the damage).

Is the base parameter used when using an array for src ?

Answer 1

In gulp streams, the file destination path follows this pseudo equation:

gulp.dest + ( gulp.src without leading base ) = dest file path

Example:

 gulp.src('src/js/foo.js', {base:'src/'}).pipe(gulp.dest('dist/')); 

Result:

'dist/' + ( 'src/js/foo.js' without a lead 'src/' ) = 'dist/js/foo.js'

In your case:

'../application-base-transpiled/' + ( '../application-base/foo/bar.js' without a host './' ) = '../application-base-transpiled/../application-base/foo/bar.js'

So, your files are in the source directory.

You need to pass {base: '../application-base/'} to gulp.src() for your example to work.

---

Note

You still need to include '../application-base/' in your src path. The purpose of base is to manipulate the path dest, according to my equation above; this does not serve to reduce the number of keystrokes that you type in gulp.src . So the end result should be something like this

 gulp.src(['../application-base/**/**.js'], { base: '../application-base' }) .pipe(gulpPlumber({ errorHandler: function errorHandler(error) { console.log('\nError ' + error); this.emit('end'); } })) .pipe(gprint(filePath => "Transpiling: " + filePath.replace('..\\application-base\\', ''))) .pipe(babel({ compact: false })) .pipe(gulp.dest('../application-base-transpiled')) .on('end', () => done()); 

---

If you do not pass the base parameter to gulp.src() , by default:

Default: everything before the ball starts (see glob2base )

This means that everything, up to the first ** or * in the template that you pass to gulp.src() , is used as the base parameter. Since your template is ../application-base/**/**.js , your base parameter will automatically become ../application-base/ .