compiler des fichiers sass plusieurs fois avec grunt-contrib-concat

Question

EDIT: après réflexion, je crois que ma question concerne grunt-contrib-concat plutôt que sass.

J'ai un dossier de fichiers SASS dont un est appelé colors.scss

//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 

Je voudrais produire une douzaine ensembles de fichiers compilés, css dont j'échangeraient le fichier colors.css pour chaque ensemble compilé. J'essaye de comprendre comment incorporer ceci dans mon gruntfile sans produire des tâches séparées pour chacun. Je voudrais une tâche qui regarde dans le dossier appelé couleurs qui à son tour contient tous les fichiers colors.scss et ensuite pour chacun fait une compilation et met cet ensemble compilé de fichiers CSS dans un dossier avec le même nom que le colors.scss fichier. Le problème est que je n'ai aucune idée par où commencer. J'utilise actuellement grunt-contrib-sass et je suis capable de produire un ensemble de fichiers. Mon gruntfile ressemble à ceci:

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

qui fonctionne très bien pour la compilation d'un ensemble, mais je veux itérer sur les fichiers de couleurs et de produire un jeu pour chaque fichier trouvé. Est-ce possible? où devrais-je commencer?

Answer 1

Pensez que j'ai compris. J'ai édité mon fichier grunt avec les modules suivants: sass, concat et copy. En résumé, je concat le fichier scss de marque spécifique dans le fichier scss principal, puis copiez tous les fichiers de support dans un dossier sass dans le répertoire dist. Ensuite, je lance sass sur les fichiers concat'd et sort les fichiers css finaux dans le dossier dist css.

Heres la configuration:

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/' } 
       ] 
      } 
     } 
    }); 
};