Elixir:バージョニング編

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>

その他のElixir関連記事はこちら

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中