私のプロジェクトでは、さまざまなディレクトリに CSS ファイルと、twitter ブートストラップや font awesome などのベンダーの他のスタイルシートがあります。本番環境では、すべてのスタイルシートを縮小して 1 つに連結しようとしています。このために、私はgrunt-contrib-cssmin
Grunt で使用しています。動作しますが、font-awesome フォント ファイルへのリンクが壊れます。これは、元の 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 コードを修正したりするにはどうすればよいですか?