Comment configurer les sourcesMaps pour LESS en utilisant Grunt?

Je suis en utilisant grunt 0.4.2 et grunt-contrib-moins 0.9.0. Je veux que mes MOINS à être compilé en CSS avec un support pour la carte source.

Mon MOINS de fichiers sont en public/lesset le principal est appelé main.less.

La compilation de public/less/main.less en public/css/main.css fonctionne, mais la source des cartes ne fonctionne pas.

Quel est le problème avec mon Grognement config ci-dessous?

{
    less: {
        dev: {
            options: {
                compress: true,
                yuicompress: true,
                optimization: 2,
                sourceMap: true,
                sourceMapFilename: "public/css/main.css.source-map.json", //Write the source map to a separate file with the given filename.
                sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
                sourceMapRootpath: "/"//Adds this path onto the Less file paths in the source map.
            },
            files: {
                "public/css/main.css": "public/less/main.less"
            }
        }
    },
    watch: {
        styles: {
            files: ["public/less/*"],
            tasks: ['less'],
            options: {
                livereload: true,
                nospaces: true
            }
        }
    }
}

Je ne veux pas avoir mon CSS créé dans mon /public/less dossier; je veux le mettre en /public/css. Sinon, je pourrais utiliser cette autre config qui fonctionne:

{
    less: {
        dev: {
            options: {
                compress: true,
                yuicompress: true,
                optimization: 2,
                sourceMap: true,
                sourceMapFilename: "public/less/main.css.map", //I DO NOT WANT THE CSS MAP HERE
                sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
            },
            files: {
                "public/less/main.css": "public/less/main.less"//I DO NOT WANT THE CSS HERE
            }
        }
    },
    watch: {
        styles: {
            files: ["public/less/*"],
            tasks: ['less'],
            options: {
                livereload: true,
                nospaces: true
            }
        }
    }
}

source d'informationauteur Ryan

  1. 16

    J'ai trouvé le MOINS la documentation du site à être plus claire en ce qui concerne les paramètres utilisés par grunt-contrib-moins.

    MOINS: Utilisation de lignes de Commande
    http://lesscss.org/usage/#command-line-usage-installing-lessc

    MNP: grunt-contrib-moins
    https://www.npmjs.org/package/grunt-contrib-less

    Structure de fichier:

    laravel/gruntfile.js
laravel/public/less/main.less
laravel/public/css/main.css
laravel/public/css/main.css.map

    Fichier principal.css.la carte note:

    • Si vous le souhaitez, vous pouvez renommer: principal.css.source de la carte.json
    • Je suppose que vous avez quelques règles de serveur de configuration qui n'a pas de serveur *.carte correctement les fichiers à partir de la 'css' dossier

    Compression remarques:

    • cleancss: true = va supprimer sourceMappingURL commentaire de main.css
    • yuicompress: true = ne PAS supprimer sourceMappingURL commentaire de main.css

    Gruntfile.js

    less: {
    dev: {
        options: {
            compress: true,
            yuicompress: true,
            optimization: 2,
            sourceMap: true,
            sourceMapFilename: 'public/css/main.css.map', //where file is generated and located
            sourceMapURL: '/css/main.css.map', //the complete url and filename put in the compiled css file
            sourceMapBasepath: 'public', //Sets sourcemap base path, defaults to current working directory.
            sourceMapRootpath: '/', //adds this path onto the sourcemap filename and less file paths
        },
        files: {
            'public/css/main.css': 'public/less/main.less',
        }
    }
},

watch: {
    styles: {
        files: ["public/less/*"],
        tasks: ['less'],
        options: {
            livereload: true,
            nospaces: true
        }
    }
},

    laravel/public/css/main.css

    .class{ compiled css here } /*# sourceMappingURL=/css/main.css.map */

    laravel/public/css/main.css.carte

    {"version":3,"sources":["/less/main.less"], etc...
  2. 4

    Si vous éprouvez toujours de la difficulté avec elle, essayez de régler une SourceMapURL le chemin complet, par exemple:

    http://www.yourdomain.com/assets/css/styles.css.map

    Évidemment, c'est un peu une douleur comme il n'est pas relative, de sorte que lorsque vous vous déplacez de votre site, il devra être changé. J'ai eu le même problème que vous et cela l'a obtenu de travailler pour moi.

    Un autre point que j'ai découvert est que vous ne pouvez pas charger la SourceMaps du système de fichiers. Il doit être à partir d'un serveur web. Pour contourner le système de fichiers question je crois que vous pouvez insérer le SourceMap.

    Ce thread sur GitHub a beaucoup d'informations.

    https://github.com/less/less.js/issues/1050#issuecomment-25621390