less - 当你的项目中有多个文件时，如何使用 Grunt 为 LESS 配置 sourceMaps？

Question

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

这能有多难？

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

这是我的 grunt 文件:

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

Answer 1

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

定义通用任务级选项(较少编译选项)，然后针对特定选项(sourceMapFilename 和 sourceMapURL)。 http://gruntjs.com/configuring-tasks#options

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