在我的项目中,我们将CSS文件放在不同的目录中,以及来自供应商的其他样式表,例如twitter bootstrap和font awesome。在生产环境中,我们试图将所有样式表缩小并连接成一个样式表。为此,我在Grunt中使用grunt-contrib-cssmin
。它工作,但字体真棒字体文件的链接中断。这是由于原始CSS文件引用了特定目录中的字体。例如,字体很棒:
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
现在我的grunt-contrib-cssmin配置如下:
cssmin: {
target: {
files: {
'web/assets/css/app.css': [
'public/assets/font-awesome/css/font-awesome.min.css',
'public/assets/bootstrap/dist/css/bootstrap.min.css',
'public/assets/select2/dist/css/select2.min.css',
'public/assets/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css',
'public/assets/css/*.css'
]
}
}
}
当然,由于font-awesome代码现在将驻留在web/assets/css/app.css
中,因此它的字体应该在web/assets/fonts/
中。我可以简单地使用grunt将所有字体复制到此目录中,但如果预计在fonts/somethingelse
中找到某些资源,它将再次中断。
如何将所有文件保存在正确的位置,或修复CSS代码以引用正确的文件?