模块化应用程序的动态 gulp.dest 路径

Dynamic gulp.dest path for modular app

我正在尝试为模块化应用程序设置 gulp。在我的 public 文件夹中,我有每个模块都有自己的 src/sassdist/css 文件夹。我想将 sass 文件从 src/sass 转换并传输到它们各自的 dist/css 文件夹。 src/sass 下还可能有更多文件夹,例如 src/sass/adminsrc/sass/user,其中包含 .scss。这些文件夹结构也应该像这样在 dist/css 中复制:dist/css/admindist/css/user。这些额外的文件夹取决于模块。

问题是可以删除和添加模块,所以我不想直接在 gulp.dest 路径中引用模块名称。我需要它是动态的,具体取决于 gulp.src 路径。

假设我的文件夹结构如下所示。

public
    |-- Modules
        |-- Module1
        |   |-- dist
        |   |   |-- css
        |   |   |   |-- style.css
        |   |-- src
        |       |-- sass
        |           |-- style.scss
        |-- Module2
        |   |-- dist
        |   |   |-- css
        |   |       |-- admin
        |   |       |   |-- style.css
        |   |       |-- user
        |   |           |-- style.css
        |   |-- src
        |       |-- sass
        |           |-- admin
        |           |   |-- style.scss
        |           |-- user
        |               |-- style.scss
        |-- Module3
            |-- dist
            |   |-- css
            |       |-- style.css
            |-- src
                |-- sass
                    |-- style.scss

这是我尝试过的 gulp 个任务。

1。使用 path.join

gulp.task('sass-modules', function () {
    gulp.src('public/Modules/**/src/sass/**/style.scss', {base: "./"})
    .pipe(sass())
    .pipe(gulp.dest(function(file) {
        return path.join(path.dirname(file.path), '???/dist/css');
    }))
    .pipe(gulp.dest('./'));
});

2。使用重命名

gulp.task('sass-modules', function () {
    gulp.src('public/Modules/**/src/sass/**/style.scss', {base: "./"})
    .pipe(sass())
    .pipe(rename(function (path) {
        path.dirname += "???/dist/css";
    }))
    .pipe(gulp.dest('./'));
});

我不确定该写什么而不是“???”。我已经尝试了多种变体,如 '../../../dist/css',它似乎都在尝试将我的 css 文件传输到 public/Modules/Module1/dist/css/Module1/src/sassdist/public/... 之类的东西,到目前为止没有任何效果。

我在发布之前已经通过 Whosebug 进行了检查,但找不到我需要的确切内容。

感谢您的帮助!

我修好了! 我仍然想知道这是否被认为是一个好的解决方案?

.pipe(rename(function (path) {
    path.dirname = path.dirname.replace('src', 'dist').replace('sass', 'css');
}))