ruby on railsで任意のJavascript CSSを読み込む(production環境)
目的
ページごとに読み込むJavascript, CSSを指定する。
今回の構成
top#indexで以下のファイルを読み込む
アプリケーション全体で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でjavascript、cssを読み込むように記述
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
