Chrome DevToolsと互換性のあるソースマップを生成するためにgrunt-contrib-lessを設定するにはどうすればよいですか？

Question

質問タイトルはかなりそれがすべてです。ソースマップをサポートするgrunt-contrib-lessタスクの設定方法がわかりません。私の予想される結果は、Chrome DevToolsのCSSインスペクタがLessルールを指すようにすることです。可能であれば、別のソースマップファイルを使用してワークスペースが乱雑にならないように、出力された同じCSSファイル内にソースマップがインラインであることが理想的です。

おかげ

すべての

Answer 1

まず、あなたは作男-contribのレスはソースマップのサポートバージョンを実行していることを確認する必要があります。最新バージョンは0.9.0ですので、このようなあなたのpackage.jsonファイルで使用されるバージョン、更新：更新プログラムをインストールするnpm installを呼び出し、コマンドラインで今

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

を。

---

次に、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.map」ではなく「XXX.css.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"... 

種類について、 ステファン