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>
