如何配置 grunt-contrib-less 以生成与 Chrome DevTools 兼容的源映射？答案

【问题标题】：How to configure grunt-contrib-less to generate source maps compatible with Chrome DevTools?如何配置 grunt-contrib-less 以生成与 Chrome DevTools 兼容的源映射？
【发布时间】：2014-02-05 23:42:20
【问题描述】：

问题标题几乎说明了一切。我不知道如何配置现在支持源映射的grunt-contrib-less 任务。我的预期结果是让 Chrome DevTools CSS 检查器指向 Less 规则。如果可能，最好将源映射内联在同一个输出的 CSS 文件中，以避免使用单独的源映射文件使我的工作区混乱。

谢谢

【问题讨论】：

标签： less google-chrome-devtools source-maps grunt-contrib-less

【解决方案1】：

这是我的 gruntfile.js，它可以工作。

更新到 grunt-contrib-less v0.9.0 很重要使用“XXX.css.map”而不是“XXX.map”也很重要。并且在提供了适当的 sourcebasepath 之后它起作用了。下面我将发布结果 .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']);
};

这是使用 lessc 生成的 .map 文件的摘录，当然可以：

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

这是使用 grunt-contrib-less 0.9.0 生成的 .map 文件的摘录：

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

亲切的问候，斯蒂芬

【讨论】：

这是一个很好的答案并且很有效，我希望他们能够添加对--source-map-map-inline 的支持，这样它就会变得更加简单，因为它包含了与 CSS 内联的地图，从而消除了对基本路径和单独的地图文件 - 非常适合开发。

【解决方案2】：

首先，您需要确保 grunt-contrib-less 运行的版本支持 Source Maps。最新版本是 0.9.0，因此请更新您的 package.json 文件中使用的版本，如下所示：

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

现在在命令行中，调用npm install 来安装更新。

接下来，在您的 Gruntfile.js 中，为您的项目配置 Source Maps。

您可以在此处遵循指南：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。

【讨论】：