运行 Grunt 任务在数组上递归

Question

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

样式-en.css
样式-jp.css
样式-ie.css

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

我很想通过传递 G运行t 一组标志来自动构建这些不同的版本，然后为每个：

为 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? and 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 */

运行 Grunt 任务在数组上递归

Run Grunt tasks recursively over array

less

gruntjs