相対URL参照を尊重するビルドタイムCSSコンバイナー？

Question

相対URL参照を考慮したビルド時のCSSコンバイナ/ミニライザを探しています。私は組み合わせていますファイルのいずれかが

/path/to/style.css 

にあり、結果のファイルが

background-image: url(/path/to/images/my-image.png). 

は、クロスプラットフォームを動作するはず含まれている必要があり

background-image: url(images/my-image.png) 

含まれている場合、ある

MacとPCがあるため、MonoやNode経由の.NETのどちらかが明白な選択肢のように見えます。ここで

Answer 1

は、PythonのWeb開発のためのWebAssets/Github

資産管理アプリケーションをチェックしてください。

それはあなたの質問に

が特定など、cssmin、cssutils、yui_css、以下、SASS、clevercss、コンパス、SCSS、CoffeeScriptの、gzipのためのフィルタ/プリコンパイルが含まれています

cssrewrite CSSファイルの相対URLを書き換えるソースフィルタ。

CSSでは、CSS ファイルの場所を基準にしたURLを指定できます。ただし、圧縮されたアセットをソースファイルと異なる場所に に保存するか、別の場所にある のソースファイルをマージすることができます。これにより、ベースURLが変更されたため、これらの相対的なCSS の参照が破損します。

このフィルタは、 ソースファイル内のCSS url（）命令をトランスペアレントに書き換えて、出力パスの場所を基準にします。 これはソースフィルタとして機能します。つまり、マージされる前に、それぞれのソースファイルに個別に適用されます。

設定は不要です。

フィルタは、手動モードをサポートします。これは、代わりに接頭辞として/カスタム/パスを使用するold_directory内のファイルを指すすべてのURLを書き換えます

get_filter('cssrewrite', replace={'old_directory', '/custom/path/'}) 

を。

一般的な使用法：あなたのjsのoutputとsrcを置き換えます。この場合

from webassets import Environment 
my_env = Environment('../static/media', '/media') 

""""As you can see, the environment requires two arguments, 
the path in which your media files are located, as well as  
the url prefix under which the media directory is available. 
This prefix will be used when generating output urls. Next, 
you need to define your assets, in the form of so called 
bundles, and register them with the environment. The easiest  
way to do it is directly in code:"""" 

from webassets import Bundle 
js = Bundle('common/jquery.js', 'site/base.js', 'site/widgets.js', filters='jsmin', output='gen/packed.js') 
my_env.register('js_all', js) 

。

directory: ../static 
url: /media 
debug: True 
updater: timestamp 

bundles: 
    bundle-name: 
     filters: sass,cssutils 
     output: cache/default.css 
     contents: 
      - css/jquery.ui.calendar.css 
      - css/jquery.ui.slider.css 

はまたジャンゴ、フラスコ、Jinja2の、WERKZEUGのための特別なフックを持ってい

Documentation is here.・ホープ、このことができます..：ここ 代替表記があります！

Answer 2

は、ディレクトリ内のすべてのCSSファイルを結合し、あなたのimagesフォルダへの参照を置換する基本的なPythonスクリプトです：

import os 
import fnmatch 

output_text = '' 

for filename in os.listdir('.'): 

    if fnmatch.fnmatch(filename, '*.css'): 
     output_text += open(filename, 'r').read() 

output_text = output_text.replace('url(images', 'url(/path/to/images')) 

f = open('combined.css', 'w') 
f.write(output_text) 
f.close() 

は、これは私の頭の上からで、テストされていないので、エラーが含まれる可能性があります。あなたのコメントに対応して

：また

、あなたはSASS/CompassまたはLESSのように、サーバ側のCSSを使用することができます。

SASS/Compassを使用すると、config.rbファイルを使用するか、コマンドラインから資産を動的にアセット（イメージ）に変更できます。相対パスと絶対パスの切り替えは、同じ方法で簡単に行うことができます。スタイルシートは自動的に圧縮されます。ファイルが結合されていることを確認するには、master.scssファイルと@importファイルを作成するだけです。私の経験のほとんどはSASSですが、私はLESSも同様の機能を持っていると信じています。

これはおそらく理想的ではありません。 Python/Rubyスクリプトでこれを処理する方がはるかに簡単で、移植性があり、効率的です。上記のPythonスクリプトを拡張して出力ファイルを圧縮し、すべての相対パスにマッチさせるために、多大な努力を払うことはありません。そして、変更のためのビルドディレクトリを見て、Foremanのようなものを使って自動的に実行させることができます。 マージにそれを使用し、JavaScriptとCSSファイルを圧縮 -