我正在使用grub 0.4.2和grunt-contrib-less 0.9.0.我希望我的LESS被编译成支持源地图的CSS.
我的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,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
}
}
},nospaces: true
}
}
}
}
解决方法
我发现LESS网站文档对于grunt-contrib-less使用的参数更加清楚.
LESS：命令行用法
http://lesscss.org/usage/#command-line-usage-installing-lessc
NPM：无耻的
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,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/*"],options: {
livereload: true,nospaces: true
}
}
},
laravel /公/ CSS / main.css的
.class{ compiled css here } /*# sourceMappingURL=/css/main.css.map */
laravel /公/ CSS / main.css.map
{"version":3,"sources":["/less/main.less"],etc...
