在数组上递归运行 Grunt 任务

Question

我必须为不同的位置和浏览器构建许多 css 文件，所有这些文件都由文件名中的标志来描述。例如：

• styles-en.css
• styles-jp.css
• styles-ie.css

内容差异由与文件命名模式匹配的 LESS 布尔变量 @isIE、@isEN、@isJA、@isDE 等处理。

我希望通过向 Grunt 传递一组标志，然后为每个标志自动构建这些不同的版本：

• 为 LESS 设置变量
• 为文件夹中的所有文件运行 LESS 编译器（所有语言都相同）
• 使用导出文件名中的变量

This answer spells out the iterations 但是有更简洁的方法吗？

Answer 1

基于How to configure sourceMaps for LESS using Grunt when there is more than one file in your project? 和Compile LESS to multiple CSS files, based on variable value，您可以按如下方式创建Gruntfile.js：

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

var TaskArray = [];
var tasks = [];
//var lessVariable = '';
var languages = ['de','en','nl'];

languages.forEach(function(language) { 
        tasks[language] = {options: {sourceMap:true, modifyVars:{}},files:{} };
        tasks[language]['options']['sourceMapFilename'] = 'dist/' + language + '.map.css';
        tasks[language]['options']['modifyVars']['is' + language.toUpperCase()]= true;
        tasks[language]['files']['dist/' + language + '.css'] = 'less/project.less';
        TaskArray.push('less:' + language);
}); 
grunt.loadNpmTasks('grunt-contrib-less');
grunt.config('less',tasks);
grunt.registerTask( 'default', TaskArray );  
}; 

以上使用languages 数组动态创建您的任务。您的布尔变量由 grunt-contrib-less 的 modifyVars 选项更改，另请参见 http://lesscss.org/usage/#using-less-in-the-browser-modify-variables。

当您的less/project.less 包含以下代码时：

@isDE: false;
@isNL: false;
@isEN: false;

.m when (@isDE) {
language: de;
}

.m when (@isNL) {
language: nl;
}

.m when (@isEN) {
language: en;
}

.m();

运行grunt && cat dist/nl.css 应输出如下所示：

Running "less:de" (less) task
File dist/de.map.css created.
File dist/de.css created

Running "less:en" (less) task
File dist/en.map.css created.
File dist/en.css created

Running "less:nl" (less) task
File dist/nl.map.css created.
File dist/nl.css created

Done, without errors.
.m {
  language: nl;
}
/*# sourceMappingURL=dist/nl.map.css */