如何使用Grunt配置LESS的sourceMaps？

Question

我正在使用grunt 0.4.2和grunt-contrib-less 0.9.0。 我希望将LESS编译成支持源映射的CSS。

我的LESS文件位于public/less中，主文件名为main.less。

public/less/main.less编译成public/css/main.css可以工作，但源映射不起作用。

以下是我的Grunt配置有什么问题？

{
    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
            }
        }
    }
}

我不想让我的CSS创建在/public/less文件夹中; 我想将它放到/public/css文件夹下。否则，我可以使用另一个有效的配置：

{
    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
            }
        }
    }
}

- Ryan

Answer 1

我发现LESS网站文档在讲解grunt-contrib-less使用的参数方面更加清晰。

LESS: 命令行用法 http://lesscss.org/usage/#command-line-usage-installing-lessc

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

文件结构:

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

文件 'main.css.map' 注释：

• 如果您愿意，可以将其重命名为：main.css.source-map.json
• 我猜您设置了一些服务器规则，无法正确地从“css”文件夹中提供*.map文件

压缩注意事项：

• cleancss：true = 将从 main.css 中删除 sourceMappingURL 注释
• yuicompress：true = 不会从 main.css 中删除 sourceMappingURL 注释

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.map

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

- jpblancoder

---

这对我来说似乎有效！非常感谢！我省略了sourceMapURL行，因为它似乎是不必要的。 - Ryan

Answer 2

如果您仍然对此有困惑，请尝试将SourceMapURL设置为完整路径，例如：

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

显然这有点麻烦，因为它不是相对的，所以当您移动您的网站时，它需要被更改。我和您一样也遇到了同样的问题，而这个方法让它为我工作。

另一个问题是您不能从文件系统加载SourceMaps。它必须来自Web服务器。为了解决文件系统问题，我认为您可以将SourceMap内联。

这个 GitHub上的线程 有很多信息。

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

- Adam Hughes