Как настроить grunt-contrib-less для создания исходных карт, совместимых с Chrome DevTools?

Название вопроса в значительной степени говорит обо всем. Я не знаю, как настроить задачу grunt-contrib-less, которая теперь поддерживает исходные карты. Мой ожидаемый результат заключается в том, чтобы инспектор CSS Chrome DevTools указывал на правила Less. Если возможно, было бы идеально, чтобы исходные карты были встроены в один и тот же выходной файл CSS, чтобы избежать загромождения моего рабочего пространства отдельными файлами исходных карт.

Спасибо

Ответ 1

Это мой gruntfile.js, он работает.

Было важно обновить версию v0.9.0 grunt-contrib-less Также важно использовать "XXX.css.map" не "XXX.map". И он работал после того, как дал правильный путь sourcebase. Далее ниже я выложу выдержки из полученных файлов .map.

gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    less: {
      development: {
        options: {
          compress: false,
          yuicompress: false,
          optimization: 2,
          sourceMap: true,
          sourceMapFilename: "assets/style/bootstrap.css.map",
          sourceMapBasepath: "assets/style/"
        },
        files: {
          // target.css file: source.less file
          "assets/style/bootstrap.css": "assets/style/bootstrap.less"
        }
      }
    },
    watch: {
      styles: {
        // Which files to watch (all .less files recursively in the less directory)
        files: ['assets/style/theme/**/*.less'],
        tasks: ['less'],
        options: {
          nospawn: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['watch']);
};

Это выдержка из файла .map, созданного с помощью lessc, который, конечно же, работает:

{"version":3,"file":"bootstrap.css","sources":["theme/page-welcome.less","bootstrap-2.3.2/mixins.less"...

Это выдержка из файла .map, сгенерированного с использованием 0,9.0 grunt-contrib-less 0.9:

{"version":3,"sources":["theme/page-welcome.less","bootstrap-2.3.2/mixins.less","theme/page-work.less"...

С уважением, Stephan

Ответ 2

Прежде всего, вам нужно убедиться, что в grunt-contrib-less работает версия, поддерживающая Source Maps. Самая новая версия - 0.9.0, поэтому обновите версию, используемую в вашем файле package.json, например:

"dependencies" : {
    ...[other dependencies]...
    "grunt-contrib-less" : "0.9.0"
}

Теперь в командной строке вызовите npm install, чтобы установить обновление.

Далее, в вашем Gruntfile.js, настройте исходные карты для своего проекта.

Вы можете найти руководство здесь: http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/ или здесь: http://roots.io/using-less-source-maps/, но здесь приведен пример конфигурации:

    less : {
        development : {
            options : {
                strictImports : true,
                sourceMap: true,
                sourceMapFilename: '../css/common.css.map',
                sourceMapURL: 'http://localhost/css/common.css.map'
            },
            files : {
                '../css/common.css' : '../less/common.less'
            }
        },
    },

Ключ гарантирует, что все, что вы используете для sourceMapURL, является фактическим URL-адресом, который можно открыть в браузере.