我正在使用带有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",
我做错了什么？
编辑：首先，尝试在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.
]);
};
笔记
名为
fixSourceMaps的自定义 grunt.registertask 为每个要修复的源映射文件调用prefixSourceMap函数。将两个参数传递给
prefixSourceMap函数，即：filePath- 要修复的源映射的路径。sourceRootPrefix- 源根前缀，例如../../
为了修复两个 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', '../../');
//...
});
//...
如上面的评论中所述，我的 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', ], } } },