使用 grunt 用不同的变量编译 LESS答案

【问题标题】：Compile LESS with different variables using grunt使用 grunt 用不同的变量编译 LESS
【发布时间】：2014-10-01 15:34:46
【问题描述】：

我有基于 Bootstrap 的 HTML 模板，有不同的颜色（红色、绿色等）。使用 @brand 变量改变颜色 variables.less。现在我去这个文件，改变变量，编译少文件，转到编译的css文件目录并重命名CSS文件根据它的颜色（red.css、green.css 等）。我做这个步骤 7 次（7 种颜色 = 7 步骤）。

我可以使用 grunt 或类似的东西自动化这个过程吗？

【问题讨论】：

@seven-phases-max 这是有史以来最好的答案

标签： twitter-bootstrap gruntjs less

【解决方案1】：

当动态生成您的任务时，您可以为@Aajhid 接受的答案创建一个更干燥的版本，另请参阅：Run Grunt tasks recursively over array

您的Gruntfile.js 如下所示：

module.exports = function (grunt) {
  'use strict';

var TaskArray = [];
var tasks = [];
var colors = ['red','green','blue'];

colors.forEach(function(color) { 
        tasks[color] = {options: {sourceMap:true, modifyVars:{}},files:{} };
        tasks[color]['options']['modifyVars']['brand']= color;
        tasks[color]['files']['dist/' + color + '.css'] = 'less/project.less';
        TaskArray.push('less:' + color);
}); 
grunt.loadNpmTasks('grunt-contrib-less');
grunt.config('less',tasks);
grunt.registerTask( 'default', TaskArray );  
};

【讨论】：

【解决方案2】：

使用grunt-contrib-less 可以覆盖任何变量。因此，您可以通过执行以下操作来自动化您的流程 -

module.exports = function(grunt) { 
    grunt.initConfig({  

        less: {

                /** Red**/
                red: {
                    options: {
                        paths: ["less/"],
                        modifyVars: {
                            brand : 'red'
                        }
                    },
                    files: {
                        "css/red.css": "less/style.less"
                    }
                },
                /** Red**/
                green: {
                    options: {
                        paths: ["less/"],
                        modifyVars: {
                            brand : 'green'
                        }
                    },
                    files: {
                        "css/green.css": "less/style.less"
                    }
                },
    });

    grunt.loadNpmTasks('grunt-contrib-less');


    grunt.registerTask('default', ['less:red','less:green']);
}

根据您的文件结构更改配置并根据需要添加任意数量的项目 - 我做了 2 个项目

【讨论】：

知道如何通过 gulp 实现这一目标吗？
@Aajahid，我正在 SASS 中寻找这种配置。请问有什么想法吗？这里的基本执行相当于 SASS 中的 modifyVars。