用grunt-contrib-concat多次编译sass文件

问题描述：

编辑：经过进一步的思考我相信我的问题是关于grunt-contrib-concat而不是sass。用grunt-contrib-concat多次编译sass文件

我的SASS文件的文件夹，其中一个被称为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

我想产生十几台编译CSS文件，其中我会掉出colors.css文件为每个编译集。我想弄清楚如何将这个并入我的gruntfile中，而不是为每个任务生成单独的任务。我希望有一个任务在文件夹中查找颜色，该文件又包含所有colors.scss文件，然后为每个文件执行编译并将编译后的一组css文件放在与colors.scss同名的文件夹中文件。问题是我不知道从哪里开始。目前我正在使用grunt-contrib-sass，并且能够生成一组文件。我gruntfile看起来是这样的：

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

工作正常编译一组，但我想遍历颜色文件并生成一组针对找到的每个文件。这可能吗？我应该从哪里开始？

答

想我明白了。我用下面的模块编辑了我的grunt文件：sass，concat和copy。

总之，我将特定品牌的scss文件连接到主scss文件，然后将所有支持文件复制到dist目录中的sass文件夹中。然后我对连续文件运行sass，并将最终的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/' } 
       ] 
      } 
     } 
    }); 
};

用grunt-contrib-concat多次编译sass文件

相关推荐