javascript - gulp.dest 没有创建目标文件夹

Question

我的 gulp 代码部分如下所示

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());

如果我改变

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

到

.pipe(gulp.dest(''))

然后创建转译后的文件，并覆盖原来的文件。问题是

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

不保存文件，原路径相同，在application-base-transpiled下

如您所见，我使用的是基数，但它似乎可以正常工作。

我错过了什么？

编辑

我仔细看了一下，好像连着

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

Gulp 仍在将转译后的文件放入原始位置，覆盖原始文件。我传递的 dest 有一些 Gulp 不喜欢的东西，并且默默地忽略了。

编辑 2

似乎删除 base 选项解决了这个问题，这与我在别处看到的建议相反。 gulp.dest 的文档并没有真正讨论这个。

谁能对此提供一些见解？

编辑 3

根据斯文的回答，我试过了

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());

但似乎 base 被忽略了，我当前目录中的文件被抓取并就地转译(我最不想做的事 - 幸运的是 GIT 有助于消除损害)。

src 使用数组时是否忽略基本参数？

Answer 1

在 gulp 流中，文件的目标路径遵循以下伪等式:

gulp.dest + (gulp.src 无前导 base) = 文件的目标路径

例子:

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

结果:

'dist/' + ('src/js/foo.js' 无前导 'src/') = 'dist/js/foo.js'

在你的情况下:

'../application-base-transpiled/' + ('../application-base/foo/bar.js' 无前导 './') = '../application-base-transpiled/../application-base/foo/bar.js'

因此您的文件最终位于原始目录中。

您必须将 {base: '../application-base/'} 传递给 gulp.src() 才能使您的示例正常工作。

---

注意

您仍然需要在 src 路径中包含 '../application-base/'。 base 的目的是根据我上面的等式操纵目标路径；它不会用于减少您在 gulp.src 中键入的击键次数。所以最终的结果应该是这样的

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());

---

如果你不通过 base option gulp.src() 设置了默认值:

Default: everything before a glob starts (see glob2base)

这意味着您传递给 gulp.src() 的模式中直到第一个 ** 或 * 的所有内容用作 base 选项。由于您的模式是 ../application-base/**/**.js，因此您的 base 选项会自动变为 ../application-base/.