gruntでsassの自動コンパイル

環境はwindowsです。
サブディレクトリに対してのコンパイル方法が分からず困っております。

Gruntfile.js
----------------------------------
module.exports = function (grunt) {

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks("grunt-contrib-watch");

var arScssFileNamse = ['test'];

var arScssConfig = {};
arScssFileNamse.forEach(function(val){
arScssConfig[val] = {
src: 'sass/' + val +'.scss',
dest: 'style/' + val +'.css'
};
});

grunt.initConfig({
sass: arScssConfig,
watch : {
sass : {
files : ['sass/*.scss'],
tasks : ['sass']
}
}
});

grunt.registerTask('default', [ 'sass', 'watch']);
};
----------------------------------
で設定を行うとstyleフォルダに対してcssが出力されますが、arScssConfig[val]に
----------------------------------
src: 'sass/sass2/' + val +'.scss',
dest: 'style/style2/' + val +'.css'
----------------------------------
を追加記述すると「sass/」に入っているscssファイルが無視され、「sass/sass2/」に入っているファイルがコンパイルされるようになります。

「sass/」と「sass/sass2/」に入っているscssファイルをどちらもコンパイルするようにしたいのです。

ご回答宜しくお願いいたします。

No.2 ベストアンサー 回答者： taloo 回答日時： 2014/06/06 22:16

No.1です。

出力の期待値をまちがえました。
test2.cssとなっていますが、test.cssの間違いです。

正しくは。

arScssConfig: {
　"test": {
　　src: 'sass/test.scss',
　　dest: 'style/test.css'
　},
　"sass2/test": {
　　src: 'sass/sass2/test.scss',
　　dest: 'style/style2/test.css'
　}
}

この回答へのお礼

思い通りの動作が出来ました！ありがとうございます。

お礼日時：2014/06/09 13:58

No.1 回答者： taloo 回答日時： 2014/06/06 22:13

ディレクトリ構成のパターン（ルール）がわからないのですが、

どういうファイル名（ファイル名リスト）から、最終的に作成したいarScssConfigは、どのようになりますか？


たとえば、
条件：
　・サブディレクトリ違いで同じファイル名が存在する。
　・ソースディレクトリのsass2を、出力ディレクトリのstyle2に変換する
として、
"test"というファイル名から、このようなarScssConfigを生成するのであれば、

arScssConfig: {
　"test": {
　　src: 'sass/test.scss',
　　dest: 'style/test2.css'
　},
　"sass2/test": {
　　src: 'sass/sass2/test.scss',
　　dest: 'style/style2/test.css'
　}
}


これでどうでしょうか。

var arScssFileNamse = ['test'];
var arScssConfig = {};
arScssFileNamse.forEach(function(val){
arScssConfig[val] = {
src: 'sass/' + val +'.scss',
dest: 'style/' + val +'.css'
};
arScssConfig['sass2/'+val] = {
src: 'sass/sass2/' + val +'.scss',
dest: 'style/style/' + val +'.css'
};
});


====================
このままではwatchがサブディレクトリのファイルを監視しないので、サブディレクトリも監視するようにした方が良いと思います。
（監視するのであれば、ですが。）

watch : {
　sass : {
　　files : ['sass/**/*.scss'],
　　tasks : ['sass']
　}
}