読者です 読者をやめる 読者になる 読者になる

ruby on railsで任意のJavascript CSSを読み込む(production環境)

目的

ページごとに読み込むJavascript, CSSを指定する。

今回の構成

  • top#indexで以下のファイルを読み込む

    • app/assets/javascripts/hoge/hogehoge.js
    • app/assets/stylesheets/hoge/hogehoge.css
  • アプリケーション全体でbootstrap.jsを読み込む

環境

手順

app/assets/javascripts/application.jsを編集
下記の記述を削除

//= require_tree .

これで、app/assets/javascriptsのサブディレクトリを含める全てのjsファイルが勝手に読み込まれなくなる

下記の記述を追加

//= require bootstrap

これで、application.html.erbがapplicationをincludeしていれば、bootstrap.jsが全てのページに適用される

次にapp/assets/stylesheets/application.cssを編集
下記の記述を削除

*= require_tree .

下記の記述を追加

*= require_directory .

これで、app/assets/stylesheets内全てでなく、app/assets/stylesheets直下のファイルだけを参照するようになる。

次に、production環境で特定のファイルをprecompile対象とする設定をする

config/environments/production.rbを以下のように編集する

config.serve_static_assets = false -> true #falseからtrueへ変更

#特定のjs, cssをassets precompile対象に(配下のファイル全てだと*.js指定もできる)
config.assets.precompile += ['hoge/hogehoge.js'] 
config.assets.precompile += ['hoge/hogehoge.css'] 
# assets/javascripts配下のファイルもassets precompile対象に
config.assets.precompile += ['*.js']

最後に、app/views/top/index.html.erbでjavascriptcssを読み込むように記述

stylesheet

<%= stylesheet_link_tag "hoge/hogehoge" %> #なるべくページ上部に記述

javascript <%= javascript_include_tag 'hoge/hogehoge' %> #なるべくページ下部に記述

起動

$ export SECRET_KEY_BASE=`rake secret`
$ rake assets:precompile RAILS_ENV=production
$ rails s -e production