如何配置grunt-contrib-less来生成与Chrome DevTools兼容的源地图？

Question

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

感谢

Answer 1

首先，你需要确保咕噜-的contrib少是运行支持源地图版本。最新的版本是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浏览器。

Answer 2

这是我的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生成的地图文件也适用：

个

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

亲切的问候， 斯蒂芬