Given

このサンプルにおける、コンテキスト(前提条件)を書く。

例えば、オブジェクトの初期化や、テストデータの投入などを行う。

When

サンプルで注目する対象を書く。テストの実行部分。

Then

このサンプルにおける、期待値(テスト結果)を書く。

例えば、ログイン前のページではreset.css, public.css, navigation.cssの3ファイルを使用し、ログイン後のページではreset.css, member.css, sidebar.cssの3ファイルを使用するとする。

何もしないままあセットファイルをプリコンパイルしてアップしちゃうと、app/assets/stylesheetsにある全ファイルが一つにまとまってしまい、名前被りや上書きなど、不具合が起こってしまう可能性がある。

なので、ログイン前のページ用のコンパイル済みアセットファイルと、ログイン後のページ用のコンパイル済みアセットファイルの2つを用意する方法をとる。

デフォルトで用意されているapplication.cssをそのままログイン前のページ用に使ってもいいけども、今回は別名のファイルを用意することにする。

app/assets/stylesheets/public-page.css

app/assets/stylesheets/member-page.css

※require_selfは自身も含むということだけど、public-page.cssとmember-page.cssに関しては通常のCSSは含ませず、コンパイル済みアセットファイルにどのCSSを含ませるか、ということだけを記述したほうが役割がきれいになる。require_selfするくらいなら、例えばbase.cssみたいなものを別途用意して、それを読み込ませる記述*= require base.cssを足したほうが良い。

reset.cssやらmember.cssやらは、app/assets/stylesheets/配下においておけばよい。

で、これらを使うHTMLファイル側には、

<%= stylecheet_link_tag “public-page”, media: “all”, “data-turbolinks-track” => true %>

みたいな感じで埋め込む。

最後にアプリケーションの設定で、public-page.cssとmember-page.cssをプリコンパイル対象のファイルに追加する。

config/environments/production.rb

config.assets.precompile += %w( public-page.css member-page.css )

※デフォルトではコメントアウトされている

これでおk!

サーバー側でプリコンパイルさせず、ローカルでプリコンパイルしておくには以下のコマンドを実行する。

rake assets:clean assets:precompile RAILS_ENV=production

CSSやJavaScriptなどを編集した場合は、サーバーにアプリを配置する前に毎回このコマンドを実行し、プリコンパイルし直す必要がある。

heroku pg:reset DATABASE