使用 Gulp.js 和 globbing 模式就地修改文件（相同的目标）

Posted 2023-02-16

【中文标题】使用 Gulp.js 和 globbing 模式就地修改文件（相同的目标）

【英文标题】：Modify file in place (same dest) using Gulp.js and a globbing pattern

【发布时间】：2014-06-08 11:36:22

【问题描述】：

我有一个 gulp 任务，它试图将 .scss 文件转换为 .css 文件（使用 gulp-ruby-sass），然后将生成的 .css 文件放到它找到原始文件的相同位置。问题是，由于我使用的是通配模式，我不一定知道原始文件的存储位置。

在下面的代码中，我尝试使用 gulp-tap 进入流并找出读取流的当前文件的文件路径：

gulp.task('convertSass', function() 
    var fileLocation = "";
    gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(tap(function(file,t)
            fileLocation = path.dirname(file.path);
            console.log(fileLocation);
        ))
        .pipe(gulp.dest(fileLocation));
);

根据console.log(fileLocation) 的输出，这段代码看起来应该可以正常工作。但是，生成的 CSS 文件似乎比我预期的要高一个目录。它应该是project/sass/partials，结果文件路径只是project/partials。

如果有更简单的方法可以做到这一点，我肯定会更加感激这个解决方案。谢谢！

【参考方案1】：

如果要将所有文件保存在 dist 文件夹中自己的路径中

const media = () => 
    return gulp.src('./src/assets/media/**/*')
        .pipe(gulp.dest(file => file.base.replace('src', 'dist'))
    )


const watch = () => 
  gulp.watch(
    "./src/**/*",
    media
  );
;

【参考方案2】：

这很有帮助！

gulp.task("default", function()

    //sass
    gulp.watch([srcPath + '.scss', '!'+ srcPath +'min.scss']).on("change", function(file) 
         console.log("Compiling SASS File: " + file.path)
         return gulp.src(file.path,  base: "./" )
        .pipe(sass(style: 'compressed'))
        .pipe(rename(suffix: '.min'))
        .pipe(sourcemaps.init())
        .pipe(autoprefixer(
            browsers: ['last 2 versions'],
            cascade: false
        ))
        .pipe(sourcemaps.write('./'))         
        .pipe(gulp.dest(".")); 
    );

    //scripts
    gulp.watch([srcPath + '.js','!'+ srcPath + 'min.js']).on("change", function(file) 
        console.log("Compiling JS File: " + file.path)
        gulp.src(file.path,  base: "./" )
        .pipe(uglify())
        .pipe(rename(suffix: '.min'))       
        .pipe(gulp.dest(".")); 
    );
)

【参考方案3】：

正如你所怀疑的那样，你把这件事弄得太复杂了。目的地不需要是动态的，因为全局路径也用于dest。只需通过管道连接到您从中获取 src 的同一基本目录，在本例中为“sass”：

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("sass"));

如果您的文件没有共同的基础并且您需要传递一个路径数组，那么这已经不够了。在这种情况下，您需要指定基本选项。

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, base: "./")
  .pipe(sass())
  .pipe(gulp.dest("./"));

【讨论】：

啊，太棒了。谢谢你。是否还有一种简单的方法可以使用 glob 作为源，但只需将所有内容直接放在 sass 文件夹中？

这对我不起作用。我不得不做gulp.src("dist/**/*") ... gulp.dest("./")

@Dan-Nolan 一种扁平化文件夹结构的方法似乎是使用gulp-rename，请参阅this question

@niftygrifty 根据the docs 它应该在正常情况下工作。文件被写入到与calculated relative base 匹配的全局路径，在本例中为sass。也许这里的 sass 插件已经在修改路径了？

但这不是将文件保存在 /sass 中，而不是像 /sass/any/where 这样的相应子目录中吗？如何使文件保存在全局路径中？

【参考方案4】：

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) 
    return file.base;
  ));

这里给出的最初答案是：https://***.com/a/29817916/3834540。

我知道这个帖子很旧，但它仍然显示为 google 上的第一个结果，所以我想我不妨在这里发布链接。

【讨论】：

这个线程很旧，但答案仍然是正确的，尽管我认为这种方法稍微干燥（如果效率稍低）。链接的问题实际上是错误使用dest 的问题。当然，给定的解决方案有效，但第一次做对，只需将 dest('./') 替换为 dest('./images')，将获得相同的结果。

另一个解决方案对我不起作用的原因是我在 gulp.src() 中有一个数组，例如gulp.src(['sass/**', 'common/sass/**']) 当我搜索答案时，这是我找到的帖子。不过可能应该更清楚

有道理。在您的情况下，问题是 gulp 没有共同的基础来计算。您的解决方案有效，但@NightOwl888 给出的指定基础的解决方案也可以。更新接受的答案以包括没有共同基础的情况。

这应该是公认的答案！不是其他的，它们仅特定于一个文件或基本路径。

【参考方案5】：

这比 numbers1311407 所引导的要简单。您根本不需要指定目标文件夹，只需使用.。另外，请务必设置基本目录。

gulp.src("sass/**/*.scss",  base: "./" )
    .pipe(sass())
    .pipe(gulp.dest("."));

【讨论】：

这是正确的答案。如果您尝试保留目标结构（即不展平结构），您必须在 gulp.src 中指明基本目录。

当我尝试这个时，文件保存在“/”而不是全局路径下。

@GuiAmbros 所说的不是真的，至少不是根据the docs。默认情况下，基数被计算为全局路径之前的所有内容。在我的回答中，基数将被计算为./sass，但问题指定输出保留sass 目录，这就是它在dest 中重复的原因。这个答案使用 base 选项实现了相同的结果，但两种方法都不是错误的。

还值得注意的是，OP 的情况可能并不常见，至少对于 CSS 处理而言，因为通常您希望导出到 css 目录或类似目录，而不是从 sass 到sass。在这种情况下，接受的答案实际上比这个选择更简单。