CSSやJavaScriptファイルを更新しても、ファイル名が同じ場合、ブラウザがそれらををキャッシュしたままで、更新が反映されないことがあります。この問題を解決する為に、Elixirではファイル名にバージョンを付与することが出来ます。
gulpfile.jsに、タスクを定義します。
// gulpfile.js var elixir = require('laravel-elixir'); elixir(function(mix) { mix.version([ 'css/app.css', 'js/app.js' ]); });
mix.version()は、引数で指定されたファイル名にユニークなバージョンを付与します。引数で指定されたファイルは、public ディレクトリにあるとみなします。バージョンを付与されたファイルは、public/build ディレクトリ以下に出力されます。
gulpコマンドを実行すると、public/build ディレクトリ以下にバージョンが付与されたファイルが生成されます。
gulp
public ├── css │ ├── app.css │ └── app.css.map ├── js │ ├── app.js │ └── app.js.map │ ├── build ├── css │ ├── app-2d8c30ca.css │ └── app.css.map ├── js ├── app-8e26b803.js └── app.js.map
バージョンが付与されたファイルをビューで読み込むには elixirヘルパー関数を使用します。
<!-- resources/views/layout.blade.php --> <!DOCTYPE HTML> <html lang="ja"> <head> ... <link rel="stylesheet" href="{{ elixir('css/app.css') }}"/> <script src="{{ elixir('js/app.js') }}"></script> </head> <body> @yield('content') </body> </html>