grunt-contrib-cssmin:CSS 源映射在开发工具中显示为空

Question

我正在使用带有cssmin的grunt来缩小和连接css文件。 css 文件连接和缩小得很好，但是当我尝试在 chrome 开发工具中的"Sources"选项卡下观看未缩小的文件时，文件显示为空。 这是我cssmin任务：

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

在镶边下启用源映射设置。web/assets/dist/css/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"
} 

我的软件包.json的版本：

"grunt-contrib-cssmin": "^0.12.0",

我做错了什么？

Answer 1

编辑：首先，尝试在Gruntfile.jsoptions中指定一个root，如下所示：

// ...
cssmin: {
options: {
// ...
root: 'web/assets/dist/css/' // <-- Add this too.
},
target: {
// ...
}
/...

---

问题

grunt-contrib-cssmin生成的源映射文件错误地指定了sources数组中的路径。生成的源映射应如下所示：

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

请注意，../../../../将 sourceRoot前缀添加到sources数组中的每个路径中。

在源映射规范中，有一节内容如下：

解析源

如果源不是"sourceRoot"前缀后的绝对URL，则源相对于源映射进行解析(就像解析html文档中的脚本src一样)。

如果指定root路径(如最初所述)不能解决问题，则表明grunt-contrib-cssmin未遵守规范的这一部分。

>替代解决方案如果最初建议的修复不起作用，请考虑添加一个自定义任务来调用一个函数，该函数在grunt-contrib-cssmin创建sourceMap后修复每个sources路径。

你可以做这样的事情：

咕噜咕噜.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.
]);
};

笔记

1. 名为fixSourceMaps的自定义 grunt.registertask 为每个要修复的源映射文件调用prefixSourceMap函数。

2. 将两个参数传递给prefixSourceMap函数，即：

   • filePath- 要修复的源映射的路径。
   • sourceRootPrefix- 源根前缀，例如../../

3. 为了修复两个 sourceMap文件(vendors.min.css.map和app.min.css.map)，sourceRootPrefix参数被指定为../../../../- 由于生成的.min.css文件与其在目录结构中原始未缩小的源.css文件的位置之间的关系，这被指定为四个级别。

如果要将另一组要缩小的.css文件添加到cssmin.target.files任务中，其中生成的.min.css文件与未缩小的源.css文件之间的关系不是四个级别，则需要指定不同的sourceRootPrefix值。

例如，假设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', '../../');
//...
});
//...

Answer 2

如上面的评论中所述，我的 Gruntfile 中有 2 个问题：

• 缺少root指令，如@RobC所述

• 网络服务器无法访问原始资产，因此我将它们移动到虚拟主机的 Web 根目录下的位置。就我而言web/assets.这是我现在正在执行的cssmin任务：

  cssmin: {
  options: {
  root: 'web/assets/dist/css/',
  report: 'gzip',
  keepSpecialComments: 0,
  sourceMap: true,
  outputSourceFiles: true
  },
  target: {
  files: {
  'web/assets/dist/css/app.min.css': [
  'web/assets/css/jumbotron-narrow.css',
  'web/assets/css/custom.css',
  ],
  }
  }
  },