Как настроить sourceMaps для LESS с помощью Grunt, если в вашем проекте более одного файла?

Question

У меня есть несколько бездействующих файлов, которые я хочу обработать их соответствием .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: { 
    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"]); 
}; 

ТИА

Answer 1

Можно определить несколько целей. Каждая цель компилирует конкретный файл меньшего размера. Предполагая, что у вас есть разумный/ограниченный список меньших файлов для компиляции (< 10?). http://gruntjs.com/configuring-tasks#task-configuration-and-targets

Определение общих параметров задачи на уровне (менее опции компиляции), а затем ориентироваться на конкретные варианты (sourceMapFilename & sourceMapURL). http://gruntjs.com/configuring-tasks#options

Я не уверен, как установить sourceMapFilename динамически, но я рассмотрю это позже. Было бы необходимо, если бы вы собирали много файлов LESS (> 10?).

Answer 2

В настоящее время пехотинец-вно-менее не получил такой вариант, см: https://github.com/gruntjs/grunt-contrib-less/issues/89

Вы можете использовать grunt.file, чтобы получить список ваших меньше файлов и чем автоматически сгенерировать задачу на файл, смотрите также: 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);