使用grunt使用不同变量进行更少的编译
使用grunt使用不同变量进行更少的编译
提问于 2014-08-08 08:03:35
我有基于引导的HTML模板，有不同的颜色(红色，绿色等)。在@brand中使用variables.less变量正在改变颜色。现在我转到这个文件，更改变量，编译更少的文件，转到编译后的css文件目录，并根据颜色重命名CSS文件(red.css、green.css等)。我把这个步骤做了7次(7色=7步)。
我可以使用咕噜或类似的方法来自动化这个过程吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-09 06:53:16
使用无齿，您可以覆盖任何变量。因此，您可以通过执行以下操作来自动化您的过程-
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项。
Stack Overflow用户
发布于 2015-04-24 21:03:18
当动态生成您的任务时，您可以创建@Aajhid所接受的答案的更枯燥的版本，另请参见：在数组上递归地运行Grunt任务
您的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 );
}; 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25198682
复制相关文章
相似问题
腾讯云开发者
