.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-autoprefixer
grunt-contrib-cssmin