Question

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

我可以使用grunt或类似的东西自动执行此过程吗？

Answer 1

使用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个项目

Answer 2

在动态生成您的任务时，您可以创建@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 );  
};

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

2 个答案: