通过数组递归运行Grunt任务 [英] Run Grunt tasks recursively over array

问题描述

我必须为不同位置和浏览器创建一些css文件，这些文件都是通过文件名中的一个标记来描述的。例如：

• styles-en.css


• styles-jp.css


• styles-ie.css

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

我希望通过向Grunt传递一组标志来自动创建这些不同的版本， / b>

• 为LESS设置变量
  
• 为文件夹中的所有文件运行LESS编译器（全部相同语言）


• 在导出的文件名中使用变量
  
  $ b $ p

  这个答案阐明了迭代，但是有一个更整洁的方法吗？
  

  解决方案

  基于如何在项目中存在多个文件时使用Grunt为LESS配置sourceMaps？和编译LESS到多个CSS文件，基于变量值，你可以创建你的 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：{}}; 
  任务[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）{
  语言：de; 
  } 
   
   .m when（@isNL）{
   language：nl; 
  } 
   
   .m when（@isEN）{
   language：en; 
  } 
   
   .m（）; 
    

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

   运行less：de （少）任务
  创建文件dist / de.map.css。 
  创建文件dist / de.css 
   
  运行less：en（less）task 
  创建文件dist / en.map.css。 
  创建文件dist / en.css 
   
  运行less：nl（less）task 
  创建文件dist / nl.map.css。 
  文件dist / nl.css创建
   
  完成，没有错误。 
   .m {
  语言：nl; 
  } 
   / *＃sourceMappingURL = dist / nl.map.css * / 
    

  
  

  I have to build a number of css files for different locations and browsers all delineated by a flag in the file name. For instance:

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

  The content differences are handled by LESS boolean variables @isIE, @isEN, @isJA, @isDE etc. that match the file naming pattern.

  I would love to automate building these different versions by passing Grunt an array of flags then for each:

  • set the variable for LESS
  • run LESS compiler for all files in a folder (same for all languages)
  • use the variable in the exported file name

  This answer spells out the iterations but is there a tidier method?

  解决方案

  Based on 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 you can create your Gruntfile.js as follows:

  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 );  
  }; 
  

  The above dynamically creates your tasks by using the languages array. Your boolean variables are change by the modifyVars option of grunt-contrib-less, see also http://lesscss.org/usage/#using-less-in-the-browser-modify-variables.

  When your less/project.less contains the following code:

  @isDE: false;
  @isNL: false;
  @isEN: false;
  
  .m when (@isDE) {
  language: de;
  }
  
  .m when (@isNL) {
  language: nl;
  }
  
  .m when (@isEN) {
  language: en;
  }
  
  .m();
  

  Running grunt && cat dist/nl.css should output like that shown beneath:

  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任务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！