1

.css ファイルにコンパイルしたい複数のフォルダーとサブフォルダーに多数の .scss ファイルを含む巨大なスタイルシート コードベースがあります。ここまでは順調ですね。

しかし、何らかの理由で、.css ファイルを各ソース フォルダーの .scss ファイルとは異なる宛先フォルダーにコンパイルする必要があります。

私が持っているソースパス:

  • src/project-1/scss/project-1.scss
  • src/project-2/subfolder/scss/project-2.scss

必要な宛先パス:

  • src/project-1/css/project-1.css
  • src/project-2/subfolder/css/project-2.css

私の単調なタスクの設定はこれです:

sass: {
    prod: {
        options: {
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: 'src',
            src: ['**/*.scss'],
            dest: 'src',
            ext: '.css',
        }]
    }
}

このセットアップでは、各 .css ファイルが .scss ファイルと同じフォルダーにコンパイルされます。「scss」フォルダーから同じ親フォルダー内の「css」フォルダーにそれらが必要です。

解決策を探す:

フィールドでさまざまな値を試しましたが、dest運がありませんでした。

grunt-contrib-copy とrename()関数を使用してみました:

copy: {
    target: {
        files: [{
            expand: true,
            cwd: 'src',
            src: ['**/*.css'],
            dest: 'src/',
            rename: function(dest, src) {
                return dest + src.replace(/\/scss\/$/, "/css/");
            }
        }]
    }
}

後者は「ほぼ」機能します。ファイルを独自の宛先にコピーし、同時に「scss」フォルダーの名前を「css」に変更しようとしていますが、置換機能はソースパスのフォルダー名を考慮していないようで、ファイル名のみを考慮しているようです。

私は回避策に近づいていますか、それともここで行き止まりに向かっていますか?

編集:解決策が見つかりました

rename私の問題を解決する関数にいくつかの小さな変更を加えました:

sass: {
    prod: {
        options: {
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: "src",
            src: ["**/*.scss"],
            dest: "src/",
            ext: ".css",
            rename: function (dest, src) {
                return dest + src.replace('scss', 'css'); // The target file is written to folder "css" instead of "scss" by renaming the folder
            }
        }]
    }
}

これにより、ソースの /scss フォルダーと同じレベルの新しい /css フォルダー内にコンパイル済みの CSS が提供されます。

例えば:

src/project-1/scss/project-1.scssにコンパイルされsrc/project-1/css/project-1.cssます。

また、タスクとタスクにまったく同じfiles: [{...}]設定を使用しており、すべて同じフォルダーとファイルに書き込みます。grunt-autoprefixergrunt-contrib-cssmin

4

0 に答える 0