1

モジュラー アプリケーション用に gulp をセットアップしようとしています。私のパブリックフォルダーには、それぞれ独自のフォルダーを持つモジュールがsrc/sassありdist/cssます。src/sasssass ファイルを変換して、それぞれのdist/cssフォルダーに転送したいと考えています。src/sasslikesrc/sass/adminの下src/sass/userに .scss を含むフォルダーがさらに存在する可能性もあります。これらのフォルダ構造は、dist/cssso:dist/css/adminやdist/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/sassorのようなものに転送しようとしているようdist/public/...です。

これを投稿する前に StackOverflow を確認しましたが、必要なものが正確に見つかりませんでした。

助けてくれてありがとう！

4

1 に答える 1