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

本文介绍了当项目中有多个文件时，如何使用Grunt为LESS配置sourceMaps？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有多个.less文件，我希望使用sourceMaps处理匹配的.css文件，每个文件都与源文件位于同一个文件夹中。

那是什么？

我没有问题直接用这种方式做这件事，但不知道如何在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：{全部：{ src：['./core/theme/**/*.less']，展开：true， dest：./core/theme/， options：{sourceMap：true}， rename：function（dest，src）{ return src.substring（0，src.lastIndexOf（'。'））+'.css'; } }，} }）; //在watch事件中配置less：all仅在修改过的文件上运行 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

解决方案 div>

你可以定义多个目标。每个目标都编译一个特定的较少文件。 假设您有一个合理的/有限的少于几个文件的编译列表（< 10？）。 gruntjs/configuring-tasks#task-configuration定义常见的任务级选项（编译选项较少），然后定位特定的选项（sourceMapFilename& sourceMapURL）。 gruntjs/configuring-tasks#options

我不确定如何动态设置sourceMapFilename，但我会在稍后查看它。如果你正在编译许多LESS文件（> 10？），那将是必要的。

I have multiple .less files that I want processed to their matching .css with sourceMaps for each file all in the same folder as the source.

How hard can that be?

I have no problem in doing this directly with less but cant figure out how to do this in grunt-contrib-less as it seems to want the sourceMapFilename to be a single hard coded value.

This my 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

解决方案

You could define multiple targets. Each target compiles a specific less file. Assuming that you have a reasonable/limited list of less files to compile (< 10?). gruntjs/configuring-tasks#task-configuration-and-targets

Define common task-level options (less compile options), then target specific options (sourceMapFilename & sourceMapURL). gruntjs/configuring-tasks#options

I'm not sure how to set the sourceMapFilename dynamically, but I will look into this later. It would be necessary if you were compiling many LESS files (> 10?).