根据变量值编译LESS到多个CSS文件

Question

具有指定variables.less文件中的颜色的单个变量（例如@themeColor: #B30F55;），以及构成实体列表的.json文件，其中每个键是实体ID并且键的值是实体的颜色（例如'8ab834f32' : '#B30F55', '3cc734f31' : '#99981F'），如何在替换变量值后运行一个Grunt任务，该任务输出与json中的实体一样多的独立CSS文件？

Answer 1

您可以为每种颜色定义不同的任务。 grunt-contrib-less支持Modifyvars选项：

  

modifyVars

     

类型：对象默认值：无

     

覆盖全局变量。相当于--modify-vars =＆＃39; VAR = VALUE＆＃39;   少选项。

您可以为每项任务设置modifyVars: themeColor={yourcolor}

  构成实体列表的

.json文件

请参阅：Grunt - read json object from file

另一个例子可以在Dynamic Build Processes with Grunt.js

找到

示例

colors.json：

{
"colors" : [
{"color" : "#B30F55", "name" : "8ab834f32"},
{"color" : "#99981F", "name" : "3cc734f31"}
]
}

Gruntfile.js：

module.exports = function (grunt) {
  'use strict';
grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
});
grunt.loadNpmTasks('grunt-contrib-less');
var allTaskArray = [];
var colors = grunt.file.readJSON('colors.json').colors;
var tasks = {};   
for (var color in colors) {
var dest =  'dist/css/' + [colors[color].name] + '.css';
tasks[colors[color].name] = {options: {
          strictMath: true,
          outputSourceFiles: true,
          modifyVars: {}
        },files:{} };
tasks[colors[color].name]['files'][dest] = 'less/main.less';       
tasks[colors[color].name]['options']['modifyVars']['color'] = colors[color].color;
allTaskArray.push('less:' + colors[color].name);
}   
grunt.config('less',tasks);
grunt.registerTask( 'default', allTaskArray );
}; 

少/ main.less：

@color: red;
p{
color: @color;
}

而不是grunt：

  

跑步＆＃34;少：8ab834f32＆＃34; （减）任务文件dist / css / 8ab834f32.css   创建：24 B→24 B

     

跑步＆＃34;少：3cc734f31＆＃34; （减）任务文件dist / css / 3cc734f31.css   创建：24 B→24 B

     

完成，没有错误。

cat dist / css / 3cc734f31.css：

p {
  color: #99981f;
}