アセット

Hanamiは、Webアセットの強力な機能をサポートしています。

構成

各アプリケーションは、アプリケーション構成で独自の分離資産設定を持つことができます。

コンパイルモード

この値を切り替えて、アプリケーションがソースからパブリックディレクトリにアセットを前処理またはコピーする必要があるかどうかを判断します。開発環境テスト環境ではデフォルトでオンになっていますが、本番環境ではオフになってます。

# apps/web/application.rb
module Web
  class Application < Hanami::Application
    configure do
      # ...
      assets do
        # compile true, enabled by default
      end
    end

    configure :production do
      assets do
        compile false
      end
    end
  end
end

指紋モード

ブラウザにアセットの正しいコピーをキャッシュさせるため、展開中に、ファイル名にチェックサム付加して各ファイルのコピーを作成します。

この機能はアプリケーションの設定で制御できます。本番環境では、デフォルトでオンになっています。

# apps/web/application.rb
module Web
  class Application < Hanami::Application
    configure do
      # ...
      assets do
        # fingerprint false, disabled by default
      end
    end

    configure :production do
      assets do
        fingerprint true
      end
    end
  end
end

有効にすると、アセットヘルパーはチェックサムの相対URLを生成します。

<%= javascript 'application' %>
src="/assets/application-d1829dc353b734e3adc24855693b70f9.js" type="text/javascript">

静的資産を提供する

開発中に動的に提供することができます。これは、マウントHanami::Staticプロジェクトラックスタック内のミドルウェア。環境変数SERVE_STATIC_ASSETSがに等しい場合、このコンポーネントは条件付きでアクティブ化されtrueます。

デフォルトでは、新しいプロジェクトがでこの機能を有効にして生成され、開発およびテストそれらに対応を通じて、モード.env.*ファイル。

# .env.development
# ...
SERVE_STATIC_ASSETS="true"

Hanamiは、プロダクションモードのプロジェクトは、NginxのようなWebサーバーを使って配備されていると仮定しています.Nginxは、Rubyコードを打つことなくそれらを提供する責任があります。

静的な資産配信は、デフォルトで有効になって、開発およびテスト環境が、オフになっ生産

この仮定が真でない場合があります。たとえば、Herokuでは静的資産を提供するためにRuby Webアプリケーションが必要です。本番環境でこの機能を有効にするには、この特殊環境変数がtrue(in .envまたは.env.production)に設定されていることを確認してください。

花見で静的資産を提供する意味は何ですか?

上記のように、この機能を有効にすると、特別なミドルウェアがプロジェクトのラックスタックの前に追加されますHanami::Static

着信要求では、次のユースケースが生成されます。

フレッシュアセット

GET /assets/application.js

apps/web/assets/javascripts/application.jstoをコピーしてpublic/assets/application.js提供します。

アセットはコピー先のパスが存在しない場合(たとえば。public/assets/application.js)のみコピーされます。それが存在する場合、資産はコピーされることなく提供されます。

アプリケーションが資産のコンパイル(コンパイルモード)をオフにした場合、Hanamiはファイルをコピーしません。

失効した資産

これは開発モードで発生する可能性があります。アセットを初めて必要としたときにコピーされpublic/、次に編集されるので、コピー先のファイルが古くなります。

GET /assets/application.js
# edit the original file: apps/web/assets/javascripts/application.js
# then require it again
GET /assets/application.js

ソースをコピー先のファイル()にコピーpublic/assets/application.js、それを提供します。

プリコンパイルされたアセット

私たちがSassを使ってスタイルシートを書くとしましょう。

GET /assets/application.css

toを前処理apps/web/assets/stylesheet/application.css.sasspublic/assets/application.cssてから提供します。

動的リソース

GET /books/23

これは静的ファイルではありませんpublic/ので、コントロールは適切なアクションを実行するバックエンドに渡されます。

不足しているリソース

GET /unknown

これは静的ファイルまたは動的リソースではなく、プロジェクトはaを返します404 (Not Found)

ソース

各アプリケーションには、ファイルを検索するための別々のディレクトリセットがあります。アセットは、これらのパスの下で再帰的に検索されます。

新しいプロジェクトには、アプリケーション資産を配置するためのデフォルトのディレクトリがあります。

% tree apps/web/assets
apps/web/assets
├── favicon.ico
├── images
├── javascripts
└── stylesheets

3 directories, 1 file

私たちはその下に(例えば。apps/web/assets/fonts)たくさんのディレクトリを追加することができます。

与えられた名前のアプリケーションWebに対して、デフォルトの資産ソースはapps/web/assets

ソースの追加

特定のアプリケーションに他のソースを追加したい場合は、それらを構成で指定することができます。

# apps/web/application.rb
module Web
  class Application < Hanami::Application
    configure do
      # ...
      assets do
        # apps/web/assets is added by default
        sources << [
          'vendor/assets'
        ]
      end
    end
  end
end

これによりapps/web/vendor/assets、サブディレクトリとそのすべてのサブディレクトリが追加されます。

花見は再帰的に資産のソースに見えます。秘密やソースコードなどの機密ファイルを誤って公開しないようにするには、これらのソースディレクトリにWebアセットのみが含まれていることを確認してください。

第三者の宝石

花見は、Webアセットを配布して花見のアプリケーションで利用できるようにするため、Rubygemsを使用することができます。

ハナミにフロントエンドフレームワークのサポートを提供したい開発者は、サードパーティの宝石を維持することができます。私たちがhanami-emberjs宝石を作りたいとしましょう。

% tree .
# ...
├── lib
│   └── hanami
│       ├── emberjs
│       │   ├── dist
│       │   │   ├── ember.js
│       │   │   └── ember.min.js
│       │   └── version.rb
│       └── emberjs.rb
├── hanami-emberjs.gemspec
# ...

我々は、提供したい資産だけを任意のディレクトリに置く。次にそれを追加します。Hanami::Assets.sources

# lib/hanami/emberjs.rb
require 'hanami/assets'

module Hanami
  module Emberjs
    require 'hanami/emberjs/version'
  end
end

Hanami::Assets.sources << __dir__ + '/emberjs/source'

アプリケーションが実行するとrequire 'hanami/emberjs'、そのディレクトリが、Hanamiがアセットを検索できるソースに追加されます。

<%= javascript 'ember' %>

javascript ヘルパーを使用してアプリケーションに組み込むことができますember.js