如何配置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"... 

親切的問候， 斯蒂芬