Comment configurer grunt-contrib-moins de générer de la source de cartes compatible avec Chrome DevTools?

La question titre dit à peu près tout. Je ne sais pas comment configurer l' grunt-contrib-moins tâche qui prend en charge maintenant la source des cartes. Mon résultat attendu est d'avoir Chrome DevTools CSS inspecteur à point pour les Moins de règles. Si possible, il serait idéal que la source des cartes en ligne dans le même éditer le fichier CSS, pour ne pas encombrer mon espace de travail séparé avec carte source des fichiers.

Grâce

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

C'est mon gruntfile.js, il fonctionne.

Il est imporant de mise à jour de grunt-contrib-moins v0.9.0
Il était également important d'utiliser des "XXX.css.map" pas "XXX.la carte". Et il a travaillé après avoir donné un bon sourcebasepath. Plus ci-dessous, je vais poster des extraits de qui en résulte .les fichiers de mappage.

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

Ceci est un extrait de un .carte fichier généré avec lessc qui, bien sûr, les œuvres:

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

Ceci est un extrait de un .carte fichier généré avec grunt-contrib-moins 0.9.0 qui marche aussi:

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

salutations,
Stephan

C'est une excellente réponse et travaille, j'aimerais qu'ils ajouter le support pour --source-map-map-inline, de cette façon, il serait beaucoup plus simple car il comprend la carte en ligne avec le CSS en supprimant la nécessité pour basepath et un fichier de configuration séparé - parfait pour le développement.

InformationsquelleAutor user2496130

2

Tout d'abord, vous aurez besoin pour vous assurer que grunt-contrib-moins, c'est une version qui prend en charge la carte Source. La dernière version 0.9.0, afin de mettre à jour la version utilisée dans votre colis.fichier json, comme ceci:
```
"dependencies" : {
    ...[other dependencies]...
    "grunt-contrib-less" : "0.9.0"
}
```
Maintenant dans la ligne de commande, appelez npm install pour installer la mise à jour.

Prochaine, dans votre Gruntfile.js, configurer la Source de Cartes pour votre projet.

Vous pouvez suivre un guide ici: http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/ ou ici: http://roots.io/using-less-source-maps/, mais voici un exemple de configuration:
```
    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'
            }
        },
    },
```
La clé est de s'assurer que tout ce que vous utilisez pour sourceMapURL est une URL qui peut être ouvert dans le navigateur.

InformationsquelleAutor kimbo6365

Vous devez vous connecter pour publier un commentaire.