编辑：首先，尝试root在您options的中指定 a ，Gruntfile.js如下所示：
// ...
cssmin: {
options: {
// ...
root: 'web/assets/dist/css/' // <-- Add this too.
},
target: {
// ...
}
/...
问题
生成的sourceMap文件grunt-contrib-cssmin错误地指定了sources数组中的路径。生成的sourceMap应如下所示：
app.min.css.map
{
"version":3,
"sources":[
"../../../../app/Resources/assets/css/jumbotron-narrow.css",
"../../../../app/Resources/assets/css/custom.css"
],
"names":[],
"mappings":"AAeA,QAdA,KAeI,eAAgB,KADpB,QA6BA,WAEI,cAAe,IAAI,MAAM,QA7C7B,KACI,YAAa,KCUb,YAAa,eAAkB,WDHnC,QAFA,QACA,WAEI,cAAe,KACf,aAAc,KASlB,WACI,WAAY,EACZ,cAAe,EACf,YAAa,KAIjB,QACI,YAAa,KACb,MAAO,KACP,WAAY,IAAI,MAAM,QAI1B,yBACI,WACI,UAAW,OAGnB,qBACI,OAAQ,KAAK,EAIjB,WACI,WAAY,OAGhB,gBACI,QAAS,KAAK,KACd,UAAW,KAIf,WACI,OAAQ,KAAK,EAEjB,gBACI,WAAY,KAIhB,oCAII,QAFA,QACA,WAEI,cAAe,EACf,aAAc,EAGlB,QACI,cAAe,KAGnB,WACI,cAAe,GC3EvB,WACI,YAAa,eACb,IAAK,iCAAkC,mBAG3C,WACI,YAAa,YACb,IAAK,8BAA+B,mBAOxC,GACI,WAAY,KACZ,eAAgB,UAChB,YAAa,EACb,YAAa,YAAe,WAC5B,YAAa,EAAI,EAAI,IAAI,KAG7B,4BACI,QAAS,MACT,YAAa,KACb,aAAc,KACd,cAAe,IAGnB,UACI,UAAW,MACX,WAAY,KAIhB,oBACI,MAAO,IAGX,sBACI,gBAAiB,KACjB,YAAa,EAGjB,cACI,aAAc,QAIlB,iCACI,QAAS"
}
请注意添加到 Array 中每个路径的sourceRoot前缀。../../../../sources
在SourceMap 规范中有一节内容如下：
解析源
如果在添加“sourceRoot”之后源不是绝对 URL，则源将相对于 SourceMap 进行解析（如解析 html 文档中的脚本 src）。
如果指定root路径（如最初提到的）不能解决问题，那么它表明规范的这一部分没有被grunt-contrib-cssmin.
替代解决方案
如果最初建议的修复不起作用，那么考虑添加一个自定义任务来调用一个函数，该函数在sourceMap(s)创建后修复每个sources路径。grunt-contrib-cssmin
你可以这样做：
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig( {
cssmin: {
options: {
report: 'gzip',
keepSpecialComments: 0,
sourceMap: true,
outputSourceFiles: true
},
target: {
files: {
'web/assets/dist/css/vendors.min.css': [
'bower_components/bootstrap/dist/css/bootstrap.min.css',
'bower_components/chosen/chosen.min.css',
'bower_components/slabText/css/slabtext.css',
'bower_components/video.js/dist/video-js.css'
],
'web/assets/dist/css/app.min.css': [
'app/Resources/assets/css/jumbotron-narrow.css',
'app/Resources/assets/css/custom.css'
]
}
}
}
});
/**
* Helper function prefixes sources paths in sourceMap files with a sourceRoot.
*
* `grunt-contrib-cssmin` does not apply the correct sourceRoot for each
* path in the `sources` Array. See github issue #248 for further info:
* (https://github.com/gruntjs/grunt-contrib-cssmin/issues/248)
*
* @param {String} filePath - The path to the sourceMap to fix.
* @param {String} sourceRootPrefix - The sourceRoot prefix e.g. ../../
*/
function prefixSourceMap(filePath, sourceRootPrefix) {
var json = grunt.file.readJSON(filePath);
json.sources = json.sources.map(function (_path) {
return sourceRootPrefix + _path;
});
grunt.file.write(filePath, JSON.stringify(json));
}
// Register Task to invoke function for fixing paths in each sourceMap file.
grunt.registerTask('fixSourceMaps', 'Fix paths in each sourceMap', function () {
prefixSourceMap('web/assets/dist/css/vendors.min.css.map', '../../../../');
prefixSourceMap('web/assets/dist/css/app.min.css.map', '../../../../');
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask("default", [
'cssmin',
'fixSourceMaps' // <-- Must be after cssmin tasks.
]);
};
笔记
名为的自定义grunt.registertask为每个要修复的 sourceMap 文件调用fixSourceMaps该prefixSourceMap函数。
两个参数被传递给prefixSourceMap函数，即：
filePath- 要修复的 sourceMap 的路径。sourceRootPrefix- sourceRoot 前缀，例如../../
为了修复两个sourceMap文件 (vendors.min.css.map和app.min.css.map)，sourceRootPrefix参数被指定为- 由于结果文件和它在目录结构中原始未压缩源文件的位置../../../../之间的关系，这被指定为四个级别。.min.css.css
如果您要向您的任务添加另一组.css要缩小的文件，其中结果文件和未缩小的源文件cssmin.target.files之间的关系不是四个级别，您将需要指定不同的值。.min.css.csssourceRootPrefix
例如，让我们在cssmin.target.files下面的 css 中说要缩小：
// ...
target: {
files: {
//...
'web/assets/quux.min.css': [ // <-- Two levels deep
'path/to/file/foo.css',
'path/to/file/baz.css'
],
// ...
}
}
// ...
由于结果quux.min.css保存在两层深的目录中，因此sourceRootPrefix参数将prefixSoureMap作为'../../'. 例如：
//...
grunt.registerTask('fixSourceMaps', 'Fix paths in each sourceMap', function () {
prefixSourceMap('web/assets/quux.min.css.map', '../../');
//...
});
//...