この質問をする前に、StackOverflow に同様の質問がいくつか 投稿されていることを指摘しておきますが、どれも問題に対する正確な解決策を提供していません。
問題
Grunt が複数の css ファイルを組み合わせて、実稼働環境用の 1 つのファイルに縮小するワークフロー セットアップがあります。
私が直面している問題は、Grunt の実行後にフォントと画像のパスが壊れていることです。それらはまだ既存の相対ファイル パスを指しているからです。
例として：
内部static/homepage/startup/common-files/css/icon-font.cssには、次の CSS ルールがあります。
@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);
私の Gruntfile では、縮小された css ファイルの出力を にstyle.min.css配置するように指定しstatic/css/custom/homepage/ます。これに伴う問題は、ファイルパスが変更され、すべてのフォントと画像の依存関係が見つからなくなり、ブラウザーで 404 ステータスが返されることです。
これを解決するために私がしたこと
この問題を解決するには、次の 2 つのオプションがあると考えました。
- すべての依存ファイルをコピーして、存在する新しいディレクトリに相対的になるようにし
style.min.cssます。これの欠点は、すぐに散らかってしまい、プロジェクトのフォルダー構造が台無しになる可能性があることです! - 手動で手動でパスを変更します。しかし、繰り返しになりますが、これには何の意味があるのでしょうか。Grunt は、タスクを自動化するために設計されました。
この問題を解決する方法を知っている人はいますか? 私はこれに 10 時間近く費やしましたが、あきらめ始めています。人々はGithub issue pageで問題を修正したと主張していますが、実際にどのように修正したかは誰も述べていません。
編集：
clean-css ライブラリのソース コードを調べrelativeToたところ、minifier オブジェクトにプロパティを渡すことができるようです。私はこれでぐちゃぐちゃになりましたが、まだ立ち往生しています。これでさらに進んだら、また報告します。
編集：
さて、私は最終的に、relativeTo(およびその他の) プロパティが何をするかを説明するドキュメントを見つけました。ただし、ファイル構造の構成がどうあるべきかについてはまだ正確に固執しています....
relativeTo - path to resolve relative @import rules and URLs
root - path to resolve absolute @import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or an output file to which rebase all URLs
参照用の Grunt 構成ファイルは次のとおりです。
module.exports = function(grunt) {
grunt.initConfig({
concat: {
homepage: {
src: [
'static/homepage/startup/common-files/css/icon-font.css',
'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
'static/homepage/startup/flat-ui/css/flat-ui.css',
'static/homepage/static/css/style.css'
],
dest: 'static/css/custom/homepage/compiled.css',
}
},
cssmin: {
homepage: {
src: 'static/css/custom/homepage/compiled.css',
dest: 'static/css/custom/homepage/style.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks("grunt-css-url-rewrite");
grunt.registerTask('build', ['concat', 'cssmin']);
grunt.registerTask('default', ["build"]);
};
ありがとう。