Konfigurieren von grunt-contrib-less zu erzeugen-source-Karten kompatibel mit Chrome DevTools?

Dem Frage-Titel ziemlich viel sagt alles. Ich weiß nicht, wie zu konfigurieren, die grunt-contrib-less Aufgabe, die nun unterstützt source-Karten. Mein erwartetes Ergebnis ist Chrome DevTools CSS-Inspektor auf die Weniger Regeln. Wenn möglich, wäre es ideal, dass die kartengrundlagen werden inline in der gleichen ausgegeben, die CSS-Datei nicht zu überfrachten mein Arbeitsbereich mit separaten source-map-Dateien.

Dank

InformationsquelleAutor Alejandro García Iglesias | 2014-01-16

Dies ist mein gruntfile.js,, es funktioniert.

War es imporant zu aktualisieren, um grunt-contrib-less v0.9.0
Es war auch wichtig, um "XXX.css.die Karte" nicht "XXX.map". Und es funktionierte nach gab eine richtige sourcebasepath. Weiter unten werde ich Auszüge aus ergeben .map-Dateien.

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']);
};

Dies ist ein Auszug aus einem .map-Datei generiert, mit lessc was natürlich funktioniert:

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

Dies ist ein Auszug aus einem .map-Datei generiert mit grunt-contrib-less-0.9.0 und die funktioniert auch:

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

freundlichen GRÜßEN,
Stephan

Das ist eine Super Lösung und funktioniert, ich wünschte, Sie würden das hinzufügen von Unterstützung für --source-map-map-inline, so wäre es so viel einfacher, wie es die Karte mit inline-CSS entfernen die Notwendigkeit für basepath und eine separate map-Datei - ideal für die Entwicklung.

InformationsquelleAutor user2496130

2

Zuerst von all, Sie müssen sicherstellen, dass grunt-contrib-less läuft eine version, die unterstützt Source-Karten. Die neueste version ist 0.9.0, so aktualisieren Sie die version, die Sie in Ihrem Paket.json-Datei, wie hier:
```
"dependencies" : {
    ...[other dependencies]...
    "grunt-contrib-less" : "0.9.0"
}
```
Nun in der Kommandozeile, rufen Sie npm install um das update zu installieren.

Nächsten, in Ihrem Gruntfile.js konfigurieren Sie kartengrundlagen für Ihr Projekt.

Hier können Sie die Anleitung hier: http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/ oder hier: http://roots.io/using-less-source-maps/, aber hier ist eine Beispiel-Konfiguration:
```
    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'
            }
        },
    },
```
Der Schlüssel ist, sicherzustellen, dass was auch immer Sie für sourceMapURL ist eine eigentliche URL im browser geöffnet werden.

InformationsquelleAutor kimbo6365

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.