プリプロセッサ

プリプロセッサ

花見は、資産のプリプロセッサを実行し、することができますなまけコンパイルの下にpublic/assets

持っている想像application.css.scssapps/web/assets/stylesheets及びreset.css
apps/web/vendor/stylesheets

拡張構造が重要です。
一つ目は必須であり、我々が扱っているいる資産の種類を理解するために使われています:.cssスタイルシートのために。二つ目はオプションであり、それはプリプロセッサのためです:.scssSassのため。

与えられた資産のためにapplication.css.scss、最後の拡張は(.scss)右プリプロセッサを決定するために使用されます。

プリプロセッサは、アプリケーションが無地のJavaScriptやスタイルシートで作業することができ、オプションです。このケースでは、唯一の拡張子(例で当社の資産に名前を付ける必要がありますapplication.css)。

# apps/web/application.rb
require 'sass'

module Web
  class Application < Hanami::Application
    configure do
      # ...

      assets do
        sources << [
          # apps/web/assets is added by default
          'vendor/assets' # app/web/vendor/assets
        ]
      end
    end
  end
end

テンプレートから、我々は実行します。

<%= stylesheet 'reset', 'application' %>

私たちは、ページコンパイラの意志の前処理をロードするかに資産をコピーしますときpublic/assets

% tree public
public/
└── assets
    ├── application.css
    └── reset.css

プリプロセッサは、場合にのみ/コピー資産をコンパイルしますコンパイルモードがオンになっています。

プリプロセッサは、デフォルトで有効になっている、開発およびテスト環境。

パフォーマンス上の理由から、この機能はオフする生産我々がすべきENV、プリコンパイル当社の資産を。

 

プリプロセッサエンジン

花見は使用チルトなどの最も一般的なプリプロセッサのためのサポートを提供するために、サス(含むsassc-ruby)、より少ない、ES6、JSXCoffeScriptオパールハンドルバーJBuilderの

それらの一つ以上を使用するためには、あなたに対応する宝石を含めるようにしてくださいGemfileとライブラリが必要です。

# Gemfile
# ...
gem 'sass'

いくつかのプリプロセッサはNode.js.が必要な場合があります マニュアルを参照してください。

 

ECMAScriptの6

私たちは強く使用することをお勧めするECMAScript 6のようにはJavaScriptの次期バージョンであるので、あなたの次のプロジェクトのために。それは完全にされていない、サポートブラウザベンダーによってまだ、これは急速に変化しています。

今日の時点で、あなたはES5で、現在のブラウザが理解できる何か、にES6コードをtranspileする必要があります。この目的のために、我々はサポートバベルを

バベルはNode.js.が必要です