RailsアプリでCSSが更新されない…

Railsアプリを開発していて,時に app/assets/stylesheets/layout.css.scss を書き換えて,ページを更新したときに,「あれっ,スタイルが更新されていないよ〜 (T-T)」というような状況が出る場合があります.

最初からずーっとdevelopment環境で作業していれば,app/assets/stylesheets 配下のスタイルファイルはページが読み込まれるたびに全て読み込む設定にデフォルトでなっているので,常に更新結果が反映されます.でも,ページアクセスの度にこれら複数のファイルが読み込まれるので,本番環境(production)環境では,これらスタイルファイル(css.scss)を結合して1つの application.css として読み込まれる様に,次のようなコマンドで,事前にコンパイルしておくのです.

$ bundle exec rake assets:precompile

この結果,public/assets/ にその結果の application.css が作成されますので,Railsはそこを読み込むようになります.javaScript関係(application.js)も同様です.これがRails 3からのアセットパイプライン(Assets Pipeline)の仕組みであります.

一度,precompile して,public/assets 配下にできてしまうと,そこを読み込む様になってしまいますので,いくら app/assets/stylesheets 配下のスタイルファイルをいじっても,それが precompile されない限り有効にはなりません.

だから,development 環境では,デバッグできるように,config/environments/development.rb ファイルに,

# Do not compress assets
config.assets.compress = false

# Expands the lines which load the assets
config.assets.debug = true

という設定にしておくのです.
(前の私の記事で,これがウザいということで,「config.assets.debug = false」にしてしまえーっ,というような記載がありましたが,これは推奨できません...あしからず.)

では,public/assets 配下に作ってしまったファイルはどうするの?,消せるの?ということですが,これはこのコマンドで消せます.

$ bundle exec rake assets:clean

私なんかは,Railsアプリ開発環境をGitで色々なところにリポジトリを分散させているので,development や production 環境が色んなところで作成されていて,当初は,development 環境なのに,public/assets の中にファイルが存在したりと厄介なことに...このアセットパイプラインの仕組みを知るまでは...

様は,public/assets 配下はリポジトリに含めないようにすればいいので,「.gitignore」ファイルに,

public/assets/*

を含めておけばいいのです.後,tmp ディレクトリも...
tmpディレクトリには,SCSSファイルが更新された際,ここにキャッシュができるのです.

だけど...

今回,JavaScriptファイル(application.js)をいじることがあって,functionを作ってもこれが反応しないのです.もしやと思って,SCSSファイルをいじってみたらこれも適用されない...

developments.rbファイルを除いても...

config.assets.compress = false
config.assets.debug = true

ちゃんとなっているし,

$ bundle exec rake assets:clean
$ rm -rf tmp/cache/*

しても,railsサーバ(WEBrick)を再起動してもダメ.

これでは埒があかないと思って,最終的にレイアウトテンプレートファイルの app/views/layouts/application.html.erb の呼び出しのところを,

<%= stylesheet_link_tag    "application",  :debug => true %>
<%= javascript_include_tag "application",  :debug => true %>

というように「:debug」オプションを付けて再起動させたところ,読み込んでくれるようになりました.
一旦,app/assets 配下から読み込んでくれるようになれば,上記の「:debug」オプションを外しても,通常通りに問題なくSCSSやJSファイルの更新結果を反映できるようになりました.

なんなんだろ...

最初,アセットパイプラインの部分が悪いと気づくまでは,JavaScriptファイルが悪いのだと色々ガチャガチャと試していましたが,休日の半日がこれで無駄になってしまいました...

今度そうなった時に慌てないために,tipsとしてこのブログに書き留めておきます.

参考にさせて頂いたサイト
Rails 3.2 アセットパイプラインで開発環境でアセットが更新されない – ボクココ

広告