如何使用Grunt为LESS配置sourceMaps？

I'm using grunt 0.4.2 and grunt-contrib-less 0.9.0. I want my LESS to be compiled into CSS with support for source maps.

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

My LESS files are in public/less, and the main one is called main.less.

我的LESS文件是公开/更少,主要文件名为main.less。

The compiling of public/less/main.less into public/css/main.css works, but source maps don't work.

将public / less / main.less编译为public / css / main.css可以正常工作,但源映射不起作用。

What is wrong with my Grunt config below?

我的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
            }
        }
    }
}

I don't want to have my CSS created in my /public/less folder; I want to put it into /public/css. Otherwise, I could use this other config, which works:

我不想在my / 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
            }
        }
    }
}

2 个解决方案

#1

I found the LESS site documentation to be more clear regarding params used by grunt-contrib-less.

我发现LESS站点文档对于grunt-contrib-less使用的params更加清晰。

LESS: Command Line Usage http://lesscss.org/usage/#command-line-usage-installing-lessc

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

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

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

File structure:

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

File 'main.css.map' note:

• If you wish, you can rename to: main.css.source-map.json

如果您愿意,可以重命名为:main.css.source-map.json

• I guess you have some server rule setup that doesn't server *.map files properly from the 'css' folder

我猜你有一些服务器规则设置不能从'css'文件夹正确地服务* .map文件

Compression notes:

• cleancss: true = will remove sourceMappingURL comment from main.css

cleancss:true =将从main.css中删除sourceMappingURL注释

• yuicompress: true = will NOT remove sourceMappingURL comment from main.css

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

#2

If you're still having trouble with it try setting the SourceMapURL to the full path, for example:

如果您仍然遇到问题,请尝试将SourceMapURL设置为完整路径,例如:

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

Obviously this is a bit of a pain as it's not relative, so when you move your site it will need to be changed. I had the same issue as you and this got it working for me.

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

Another point I discovered is that you cannot load the SourceMaps from the file system. It has to be from a web server. To get around the file system issue I believe you can inline the SourceMap.

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

This thread on GitHub has a lot of information.

GitHub上的这个帖子有很多信息。

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