当项目中有多个文件时，如何使用 Grunt 为 LESS 配置 sourceMaps？答案

【问题标题】：How to configure sourceMaps for LESS using Grunt when there is more than one file in your project?当项目中有多个文件时，如何使用 Grunt 为 LESS 配置 sourceMaps？
【发布时间】：2014-11-05 21:36:51
【问题描述】：

我有多个 .less 文件，我想将它们处理为匹配的 .css 和 sourceMaps，每个文件都在与源相同的文件夹中。

这有多难？

我直接用 less 执行此操作没有问题，但无法弄清楚如何在 grunt-contrib-less 中执行此操作，因为它似乎希望 sourceMapFilename 是单个硬编码值。

这是我的 gruntfile：

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
watch: {
  options: {
    livereload: true,
  },
  css: {
    files: ['./core/theme/**/*.less'],
    tasks: ['less'],
    options: {
      spawn: false
    },
  },
},
less: {
  all: {
    src: ['./core/theme/**/*.less'],
    expand: true,  
    dest: "./core/theme/",
    options:{sourceMap:true},
rename:function (dest, src) {
        return src.substring(0, src.lastIndexOf('.'))+'.css';
    }
  },
}   
});
// on watch events configure less:all to only run on changed file
grunt.event.on('watch', function(action, filepath) {
  grunt.config('less.all.src', filepath);
});

grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-less");

grunt.registerTask("default", ["less"]);
};

TIA

【问题讨论】：

标签： less gruntjs source-maps

【解决方案1】：

您可以定义多个目标。每个目标编译一个特定的 less 文件。假设您有一个合理/有限的要编译的文件列表（http://gruntjs.com/configuring-tasks#task-configuration-and-targets

定义常见的任务级选项（较少的编译选项），然后针对特定选项（sourceMapFilename 和 sourceMapURL）。 http://gruntjs.com/configuring-tasks#options

我不确定如何动态设置 sourceMapFilename，但我稍后会研究。如果您要编译许多 LESS 文件（> 10 个？），这将是必要的。

【讨论】：

不幸的是，我有 20 多个文件，无论如何这将需要 20 多个观察者，每个人都在观看一个文件，这似乎是一种巨大的资源浪费。
我遇到了同样的问题。我的用例中有数百个文件。如果您找到解决方案，请告诉我们。
AFAIK，多目标是目前唯一的方法。我想这（自动目标生成）可以在 Grunt 中自动化，所以通过某些技巧，应该可以让事情变得比手动硬编码所有 100 个目标更简单。

【解决方案2】：

目前 grunt-contrib-less 还没有这个选项，见：https://github.com/gruntjs/grunt-contrib-less/issues/89

您可以使用 grunt.file 获取您的 less 文件列表，而不是自动生成每个文件的任务，另请参阅：Compile LESS to multiple CSS files, based on variable value

Gruntfile.js：

module.exports = function (grunt) {
  'use strict';
grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
});

var allTaskArray = [];
var tasks = {};

grunt.file.recurse('less/', function(abspath, rootdir, subdir, filename)
{
    if(filename.match(/\.less$/g)){
        var name = filename.substring(0, filename.lastIndexOf('.'));
        tasks[name] = {options: {sourceMap:true},files:{} };
        tasks[name]['options']['sourceMapFilename'] = 'dist/' + name + '.map.css';
        tasks[name]['files']['dist/' + name + '.css'] = abspath;
        allTaskArray.push('less:' + name);
    }

});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.config('less',tasks);
grunt.registerTask( 'default', allTaskArray );  
};

当你的文件结构如下图所示：

less
├── less2
│   └── main2.less
└── main.less

运行 grunt 将导致：

Running "less:main2" (less) task
File dist/main2.map.css created.
File dist/main2.css created: 24 B → 66 B

Running "less:main" (less) task
File dist/main.map.css created.
File dist/main.css created: 24 B → 65 B

请注意，您还可以按如下方式动态添加监视任务：

grunt.loadNpmTasks('grunt-contrib-watch');
var watch = {
  options: {
    livereload: true,
  },
  css: {
    files: ['./less/**/*.less'],
    tasks: [],
    options: {
      spawn: false
    },
  }
};
watch['css']['tasks'] = allTaskArray;
grunt.config('watch',watch);

【讨论】：