grunt-contrib-concatで複数回sassファイルをコンパイル

Question

EDIT：私の質問は、私の質問は踏み台よりもむしろgrunt-contrib-concatだと私は信じています。

私は私がcolors.cssファイルを入れ替えることになるのコンパイル済みのCSSファイル、のダースセットを生成したい

//neutrals 
$white: #fff; 
$light-gray: #eee; 
$gray: #9f9f9f; 
$slate: #59595A; 
$charcoal: #404041; 

$gold: #FFD34E; 

//define non-neutral colors by use. These are what would change if our app was whitelabeled. 
$bright-accent-color: tint(#FF4849, 0%); 
$muted-accent-color: $bright-accent-color; 
$dark-accent-color: $bright-accent-color; 

$note-color: #FFFAD5; 
$bright-warning-color: black; // will this be used in new scheme? 
$muted-warning-color: tint(#DB9E36, 20%); 

$dark-warning-color: $charcoal; 
$light-background-color: #f3f6f9; 

$primary-nav-color: #172740; // dark blue 
$secondary-nav-color: #263D59; // blue 

colors.scssと呼ばれているそのうちの一つSASSファイルのフォルダを持っていますコンパイルされた各セットに対して私は、これを私のgruntfileにどのように組み込み、それぞれのタスクを別々に作成するのかを理解しようとしています。私はフォルダー内に色の名前が入っていて、colors.scssファイルがすべて入っていて、次にそれぞれのファイルに対してコンパイルを行い、colors.scssと同じ名前のフォルダーにコンパイルされたcssファイルを入れたいファイル。問題はどこから始めるのか分かりません。私は現在grunt-contrib-sassを使用しています。私は1組のファイルを生成できます。

sass: { 
     dist: { 
      options: { 
       style: 'expanded' 
      }, 
      files: { 
       'dist/main.css': 'app/css/main.scss' 
      } 
     } 
    }, 

1セットをコンパイルするため正常に動作しますが、私は色のファイルを反復処理し、見つかったファイルごとに1セットを生成したい：私のgruntfileはこのようになります。これは可能ですか？どこから始めたらいいですか？

Answer 1

私はそれを得たと思う。私はgrassfileを以下のモジュールで編集しました：sass、concat、およびcopy

要約すると、特定のブランドのscssファイルをメインのscssファイルに連結し、すべてのサポートファイルをdistディレクトリのsassフォルダにコピーします。その後、私はconcat'dファイルを嫌にして、最後のCSSファイルをdist cssフォルダに出力します。

相続人の構成：

module.exports = function(grunt) { 
    'use strict'; 
    var sassFiles = []; 
    grunt.loadNpmTasks('grunt-contrib-sass'); 
    grunt.loadNpmTasks('grunt-contrib-concat'); 
    grunt.loadNpmTasks('grunt-contrib-copy'); 
    grunt.registerTask('default', ['concat', 'copy:sass', 'sass']); 
    grunt.initConfig({ 
     concat: (function(){ 
      var concat = { 
       options: { 
        sourceMap: true 
       } 
      }; 
      var files = []; 
      grunt.file.recurse('app/css/brands/', function(abspath, rootdir, subdir, filename){ 
       files.push(filename); 
      }); 

      sassFiles = files; 
      files.forEach(file => { 
       concat[file] = { 
        src: [ 
         'app/css/brands/'+file, 
         'app/css/main.scss' 
        ], 
        dest: 'dist/css/sass/'+file 
       }; 
      }); 

      return concat; 
     }()), 
     sass: { 
      dist: { 
       options: { 
        style: 'expanded' 
       }, 
       files: (function(){ 
        var fileObject = {}; 
        sassFiles.forEach(file => { 
         var filename = file.split('.')[0]; 
         fileObject['dist/css/'+filename+'.css'] = 
          'dist/css/sass/'+file; 
        }); 
        return fileObject; 
       }()) 
      } 
     }, 
     copy: { 
      sass: { 
       files: [ 
        { expand: true, cwd: 'app/css', src: '**', dest: 'dist/css/sass/' } 
       ] 
      } 
     } 
    }); 
};