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

У меня есть несколько файлов .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"]);
};

ТИА


less source-maps gruntjs
person blackmamba    schedule 17.02.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

person jpblancoder    schedule 18.02.2014
comment
К сожалению, у меня более 20 файлов, и в любом случае для этого потребуется более 20 наблюдателей, каждый из которых просматривает один файл, что кажется огромной тратой ресурсов. - person blackmamba; 19.02.2014
comment
Я испытываю ту же проблему. У меня на сотни меньше файлов в моем случае использования. Дайте нам знать, если вы найдете решение. - person am80l; 03.09.2014
comment
Насколько я знаю, несколько целей - это единственный способ на данный момент. Я предполагаю, что это (автоматическая генерация целей) может быть автоматизировано в Grunt, поэтому с помощью определенных трюков должно быть возможно сделать вещи более простыми, чем жестко запрограммировать все 100 целей вручную. - person seven-phases-max; 03.09.2014

arrow_upward
0
arrow_downward

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

Вы можете использовать grunt.file, чтобы получить список файлов с меньшим количеством файлов, а затем автоматически сгенерировать задачу. на файл, см. также: Компилировать LESS в несколько Файлы CSS на основе значения переменной

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);
person Bass Jobsen    schedule 05.11.2014