Web プロジェクト js css 静的ファイル キャッシュ solution_html/css_WEB-ITnose

Web 開発のプロセスでは、js および css ファイルのキャッシュの問題がよく発生します。ブラウザのキャッシュを手動でクリアすることはできますが、ユーザーに慣れていない操作を実行するように指示することはできません。 (ブラウジング サーバー キャッシュのクリア) この問題を解決するために、フロントエンドを構築するときに grunt プラグインを使用してこれを実行できます。これは、バージョン番号を自動的に追加します。 js および css ファイル (ここではタイムスタンプを使用します)

grunt の js および css ファイルにバージョンを自動的に追加するプラグインは、指定された一致する js および css ファイルへの構成されたディレクトリ内のすべての参照にバージョン番号を追加できます。

github アドレス:

https://github .com/noahxinhao/automatic-version-increment

具体的な手順

auto-version-increment

アセットのキャッシュを制御するアセット URL にタイムスタンプ ハッシュを追加することによって

入門

このプラグインには Grunt ~0.4.1 が必要です

これまで Grunt を使用したことがない場合は、Gruntfile の作成方法が説明されている入門ガイドを必ず確認してください。 Grunt プラグインをインストールして使用するだけでなく、そのプロセスに慣れたら、次のコマンドでこのプラグインをインストールできます。 JavaScript:

npm install automatic-version-increment --save-dev

「自動」タスク

概要

プロジェクトの Gruntfile で、automatic という名前のセクションを、grunt.initConfig() に渡されたデータ オブジェクトに追加します。

grunt.loadNpmTasks('automatic-version-increment');

使用例

デフォルト オプション

この例では、hello.js と hello.css を含む Index.html があり、Gruntfile.js に以下のように記述すると、タイムスタンプ付きのアセット URL を含む Index.html を取得できます。 css または js ファイルのパス ファイルは、アセットを含むファイルです (通常は HTML ファイル)。

正しいパスを記述するように注意してください。コーディング スタイル。新しい機能または変更された機能の単体テストを追加し、Grunt を使用してコードをテストします。