gulp.dest not creating destination folder

Question

My gulp code looks like this, in part

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 the transpiled files are created, and overwrite the originals. The problem is that

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

does not save the file, with the same original path, under application-base-transpiled

As you can see, I am using a base, which seems to work otherwise.

What am I missing?

EDIT

I looked more closely, and it seems even with

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

Gulp is still placing the transpiled files into the original place, overwriting the original. There's something about the dest I'm passing that Gulp doesn't like, and is ignoring silently.

EDIT 2

It seems removing the base option solves this problem, contrary to advice I've seen elsewhere. The docs for gulp.dest don't really discuss this.

Can anyone provide some insight into this?

EDIT 3

Per Sven's answer, 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 the base is being ignored, and the files from my own current directory are being grabbed and transpiled in place (the last thing I want - fortunately GIT was helpful in undoing the damage).

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

Answer 1

In gulp streams the destination path of a file follows this pseudo-equation:

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

Example:

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

Result:

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

In your case:

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

So your files end up in the original directory.

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

---

NOTE

You still need to include '../application-base/' in your src path. The purpose of base is to manipulate the dest path, per my equation above; it does not serve the purpose of lessening the number of keystrokes 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 don't pass a base option to gulp.src() a default is set:

Default: everything before a glob starts (see glob2base)

What this means is that everything up to the first ** or * in the pattern that you pass to gulp.src() is used as the base option. Since your pattern is ../application-base/**/**.js, your base option automatically becomes ../application-base/.