当项目中有多个文件时，如何使用Grunt为LESS配置sourceMaps？ [英] How to configure sourceMaps for LESS using Grunt when there is more than one file in your project?

问题描述

我有多个.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？）。
http://gruntjs.com/configuring-tasks#task-configuration定义常见的任务级选项（编译选项较少），然后定位特定的选项（sourceMapFilename& sourceMapURL）。
http://gruntjs.com/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?). http://gruntjs.com/configuring-tasks#task-configuration-and-targets

Define common task-level options (less compile options), then target specific options (sourceMapFilename & sourceMapURL). http://gruntjs.com/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?).

这篇关于当项目中有多个文件时，如何使用Grunt为LESS配置sourceMaps？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！