Css 如何使用Grunt为更少的用户配置sourceMaps？

我使用的是Grunt0.4.2和GruntContrib小于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
            }
        }
    }
}

我不想在我的

/public/less

文件夹中创建CSS；我想把它放到

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

---

我发现站点文档越少，grunt contrib使用的参数就越清晰

更少：命令行用法

NPM:grunt contrib less

文件结构： 文件“main.css.map”注意：

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

压缩说明：

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

Grunfile.js laravel/public/css/main.css laravel/public/css/main.css.map

---

如果仍有问题，请尝试将SourceMapURL设置为完整路径，例如：

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

显然，这有点痛苦，因为它不是相对的，所以当你移动你的网站时，它需要改变。我和你有同样的问题，这让它为我工作

我发现的另一点是，您无法从文件系统加载SourceMaps。它必须来自web服务器。为了解决文件系统问题，我相信您可以内联SourceMap

这有很多信息

---

这似乎对我有用！非常感谢！我省略了

sourceMapURL

行，因为这似乎是不必要的。

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

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

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

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