2011-08-23 12 views
7

JSF Webアプリケーションを使用しています。初めてCSSファイルを変更してプログラムを展開するたびに、CSSファイルの変更は反映されません。私は別の状況でそれをテストしました。これはどのようにして起こり、どのように解決できますか?CSSファイルの変更は展開後に反映されません。

+2

は1、その他を除外するには、ブラウザでCtrl + F5キーを押したとき、彼らはロードしていますか? – BalusC

+0

はいCtrl + F5を押すとロードされます。 – qazal

+0

はい、Ctrl + F5を押すとロードされます。この手段では、最後のCSSはブラウザの現金に残ります。どのように私は現金でこの問題を解決することができますか? – qazal

答えて

12

はい、私はCtrlキー+ F5キーを押したときに、それは次にそれはちょうど、ブラウザのキャッシュから提供された

がロードされます。それは完璧です。実際の運用環境でネットワーク帯域幅を節約します。しかし、私は、これが開発中、または製品にアップデートをもたらすたびに邪魔していると想像することができます。開発中にCtrl + F5キーに慣れることを学ぶだけです。しかし、プロダクションではエンドユーザが「トリック」を認識していないかもしれないので、本当に解決したいと思っています。

一般的なアプローチは、要求パラメータとしてバージョン番号をCSSリソースに追加することです。

<link rel="stylesheet" href="style.css?v=1.0" /> 

大規模な変更を行うたびに、バージョン番号を増分してから本番環境に移行します。

これにより、ブラウザはスタイルシートを再読み込みします。

もう1つの方法は、サーバーの起動時間を使用することです。 JSFを使用しているときは、アプリケーションスコープ管理Beanとしてfaces-config.xmlに宣言されたjava.util.Dateを使用すると簡単にこれを行うことができます。

<managed-bean> 
    <description>Startup date</description> 
    <managed-bean-name>startup</managed-bean-name> 
    <managed-bean-class>java.util.Date</managed-bean-class> 
    <managed-bean-scope>application</managed-bean-scope> 
</managed-bean> 

次に、あなたがタイムスタンプを取得するためにDate#getTime()を使用することができます。

<link rel="stylesheet" href="style.css?#{startup.time}" /> 

これは、のようなHTMLに生成されます。

<link rel="stylesheet" href="style.css?1314105929937" /> 

それは毎回変更しますあなたは、サーバーを再起動しますか、 webappを再デプロイしてください。ブラウザはリソースをリロードすることが強制されます(実際には変更されていない場合も同様です)!キャッシングと帯域幅の使用が協調的であればn)。 JavaScriptや画像などの他の静的リソースにも同じ手法を適用できます。

すでにJSF 2.xを使用している場合は、組み込みの「リソースライブラリのバージョン管理」機能を使用できます。も参照してくださいWhat is the JSF resource library for and how should it be used?

+0

あなたのソリューションに感謝します – qazal

+0

+1便利なトリック、ありがとうございますBalusC。たぶんあなたはあなたの答えを本でコンパイルするべきです(余裕があるなら)。私はそれを買うだろう:) – kostja

+0

いいアイデアですが、CSSファイルを含むJSFの方法、つまり ''と組み合わせるチャンスがありますか? –

0

私はcssファイルを変更しながら同じ問題を抱えていて、サイトをリフレッシュする必要があり、かなりannyoingと非常に不自由だった。

最終的に私はあなたのプロジェクトに実装する必要があるこの素敵な「ツール」、つまりjavascriptファイルを見つけました。 サイトをもう一度更新する必要はなく、CSSファイルを保存するだけで、2,3秒後に自動的に変更が適用されます。ここで

はリンクです:ところでhttp://cssrefresh.frebsite.nl/

、いつものようにBalusC、から非常に便利なトリック;)

+0

あなたが言ったように使ってみましたが、私のために働いていません。 jsファイルをダウンロードしてプロジェクトに入れましたが効果はありません: – Aditzu

関連する問題