为什么 Gulp 不保留从 dest 函数返回的文件名？答案

【问题标题】：Why Gulp does not keep file names returned from dest function?为什么 Gulp 不保留从 dest 函数返回的文件名？
【发布时间】：2015-09-08 11:32:34
【问题描述】：

我有以下文件路径：

resources/assets/css/site1/app.css
resources/assets/css/site2/app.css
resources/assets/css/common/common.css

并且我希望将它们复制到public 文件夹而不保留我的嵌套文件夹结构。显然，我需要修改目标文件名，因为我这里有两个app.css。因此，我决定将路径的最后一个文件夹作为文件名的前缀（并添加 -dev 后缀，因为这些文件仅用于开发模式，在构建具有 elixir 缩小的最终版本时将被删除）。结果我应该得到：

public/css/site1-app-dev.css
public/css/site2-app-dev.css
public/css/common-common-dev.css

现在我有以下 gulp 代码：

gulp.src("resources/assets/css/**/*.css")
    .pipe(gulp.dest(
    function(file) { 
        var newPath = "public/css/" + 
           // folder name, like admin or public
           path.basename(path.dirname(file.path)) + "-" +
           path.basename(file.path, ".css") + "-dev.css";

        console.log(newPath);

        return newPath;
    }));

我看到控制台按预期输出结果。但最后我得到以下文件：

public/css/site1-app-dev.css/site1/app.css
public/css/site2-app-dev.css/site2/app.css
public/css/common-common-dev.css/common/common.css

显然，gulp 将newPath 视为文件夹名称，以便在复制与**/*.css 匹配的文件并保留文件夹层次结构时使用。

有什么方法可以告诉 gulp 我真的希望它把 newPath 当作最终的目标文件名而不是目录？

【问题讨论】：

gulp.dest只能更改directory，如果要更改file name，最好检查gulp-rename。

标签： javascript gulp

【解决方案1】：

使用gulp-rename在文件名上添加后缀，指定base以保持嵌套文件夹结构。

var rename = require('gulp-rename');

gulp.src("resources/assets/css/**/*.css", {base: 'resources/assets/css/'})
   .pipe(rename({ suffix: "-dev", }))
   .pipe(gulp.dest("public/css/"));

https://www.npmjs.com/package/gulp-rename

【讨论】：