为什么Gulp 4基本选项会在当前文件夹中生成文件

Question

遵循vscode指南（使用版本3）时，有很多针对gulp 3的指南，但运行npm install gulp后我使用gulp 4

我想在projectroot/jsp/scss/*.scss中编译scss，输出到projectroot/jsp/out/css/...........

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');
var { resolve } = require('path')
var cssOutput = resolve(__dirname, './jsp/out/css')
gulp.task('sass', gulp.series(function (done) {
    return gulp.src('jsp/scss/*.scss', { base: './jsp/out/css' })
        .pipe(sass())
        .pipe(gulp.dest(function (f) {
            done()
            console.log(f.base)
            return f.base;
        }))
}));

gulp.task('default', gulp.series('sass', function () {
    gulp.watch('jsp/scss/*.scss', gulp.series('sass'));
}))

当我运行gulp -f gulpfile.js

时

它在我的scss文件夹中输出index.css

我该如何解决这个问题？

这是我的文件夹

我知道关于版本3的指南很多，但是我使用的是版本4 ...

Answer 1

对于您而言，您不需要base选项。足够了：

return gulp.src('jsp/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest("jsp/out/css"))

我将尝试解释我认为原始代码中正在发生的事情。请参见glob base from gulpjs documentation中有关基本选项的说明：

  

Glob base

     

全局基础（有时也称为全局父级）是路径段   在全局字符串中的任何特殊字符之前。因此，全球基地   /src/js/**.js的是/ src / js /。所有与glob匹配的路径都是   保证共享全局基数-路径段不能   变量。

     

由src（）生成的Vinyl实例是使用glob base构建的   设置为其基本属性。当用   dest（），将从输出路径中删除基数以保留   目录结构。

最后一句话很关键。基数将被删除-因此，当您在dest函数中返回基数时，它无效。您设置了基础，但将其删除，而将'jsp/scss/'的gulp.src路径保留为actve目录结构。

当您返回被删除的相同碱基时，这是我的最佳猜测。

现在，在我的简化代码中，基数自动为'jsp\scss'（所有在*号之前的内容）。哪个已删除，因此我们不再需要担心scss文件夹。因此，您想要什么文件夹结构：'jsp/out/css'

[另外，您选择的库不属于文件目录结构的一部分-对我来说似乎很奇怪（如果不是非法的话）。 base的目的是稍后在src中指示在使用base之后（不包括base）使用哪种文件夹结构。

因此，例如，如果使用的是'jsp'的基础，则其后继文件夹结构为'scss / etc'。跟随您放入gulp.dest的所有内容，它们将充当父目录。 ]