Jex’s Note

Rails Asset

Command

清除 assets cache

rake assets:clean

precompiled 所有 assets

rake assets:precompile
RAILS_ENV=production bundle exec rake assets:precompile

Custom assets folder

config/application.rb 在 class 裡加上 :

config.assets.paths << Rails.root.join("app", "assets", "[custom foler name]")

加入 fonts

1) config/application.rb

config.assets.paths << Rails.root.join("app", "assets", "fonts")

?) config/initializers/assets.rb, 不加也能 work, 但先保留

# Rails.application.config.assets.precompile += %w( .svg .eot .woff .ttf )

Instead of assets/fonts path

font-awesome.min.css.erb :

src:url(<%= asset_path 'dashboard/fontawesome-webfont.eot' %>);

它會被 compile 成

src:url(/assets/dashboard/fontawesome-webfont-e511891d3e01b0b27aed51a219ced5119e2c3d0460465af8242e9bff4cb61b77.eot);

如果不用預設的 application.js application.css

不用預設的 application, 在 controller 帶值給 layout load asset, 就必須要寫在 config/initializers/assets.rb :

Rails.application.config.assets.precompile += %w( welcome.js )
Rails.application.config.assets.precompile += %w( welcome.css )
Rails.application.config.assets.precompile += %w( videofrom.js )
Rails.application.config.assets.precompile += %w( videofrom.css )

或加入所有的 js 及 css

config.assets.precompile += Dir["#{__dir__}/../app/assets/stylesheets/*.css"].map{|i|i.split('/').pop}
config.assets.precompile += Dir["#{__dir__}/../app/assets/javascripts/*.js"].map{|i|i.split('/').pop}

讀取 Javascript / CSS

<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application" %>

依 controller name 決定讀取的 JS

view : (讓 controller 讀自己的 javascript)

<%= stylesheet_link_tag controller_name, media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag controller_name, 'data-turbolinks-track' => true %>

require 語法說明

//= require jquery
//= require jquery.turbolinks       # 一定要馬上在 jquery 後面 load
//= require jquery_ujs
//= require turbolinks

/app/assets/javascripts/application.js :

//= require jquery
//= require jquery_ujs      # unobtrusive JavaScript. Ajax
//= require_tree .          # include all files
//= require application     # include application.js
//= require shared          # include lib/assets/javascripts/shared.js.coffee
//= require friend          # include vendor/assets/javascripts/friend.js

/app/assets/stylesheets/application.css :

/*
 *= require reset           # Included before the content in this file
 *= require_self            # Specifies where to insert content in this file
 *= require_tree .
 */
form.new_user {
    border: 1px dashed gray;    # include before everything else
}

Helper

Assets helper 使用後都會加上 hash, 讓 browser 判斷是否拿 cache

audio_path("horse.wav")   # => /audios/horse.wav
audio_tag("sound")        # => <audio src="/audios/sound" />
font_path("font.ttf")     # => /fonts/font.ttf
image_path("edit.png")    # => "/images/edit.png"
image_tag("icon.png")     # => <img src="/images/icon.png" alt="Icon" />
video_path("hd.avi")      # => /videos/hd.avi
video_tag("trailer.ogg")  # => <video src="/videos/trailer.ogg" />

引入

src: url('/assets/fonts/myfont-webfont.ttf')
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype');

在副檔名加入 .erb, ex: application.css.erb

src: url(<%= asset_path 'Chunkfive-webfont.eot' %>);

或直接用 public 路徑, 不管是 assets/fonts, assets/js, 最後都是同一層目錄結構, 所以可以在 css 下直接引入 /assets/web-icons.woff 位在 /assets/fonts/web-icons.woff 的檔案

Sass helper

將原本 .css 檔 rename 為 .scss, 並根據以下修改

image-url("rails.png")         # => url(/assets/rails.png)
image-path("rails.png")        # => "/assets/rails.png".
asset-url("rails.png", image)  # => url(/assets/rails.png)
asset-path("rails.png", image) # => "/assets/rails.png"

用法

src: asset-url('Junction-webfont.eot', font);
background-image:image-url('application/typewriter_dark.jpg');
src: url(font-path('myfont-webfont.eot')
src: font-url('icofonts.eot');                      # compile css 後 : src: url(/assets/icofonts.eot);
src: url(font-path('myfont-webfont.eot')

src:url(/assets/dashboard/web-icons/web-icons.eot?v=0.2.2)      # web-icons.eot 的路徑在 app/assets/fonts/dashboard/web-icons/web-icons.eot
改成
src:asset-url("dashboard/web-icons/web-icons.eot?v=0.2.2")

如何套入 bootstrap dashboard theme

將會引入的 css 放在 assets/stylesheets/dashboard

assets/stylesheets/dashboard.css

/*
 *= require_tree ./dashboard
 */

將會引入的 js 放在 assets/javascripts/dashboard

assets/javascripts/dashboard.js

/*
 *= require ./dashboard/jquery.min.js
 *= require_tree ./dashboard
 */

將會引入的 fonts 放在 assets/fonts/dashboard

需再做以下步驟

1) config/application.rb 加入 assets_path

2) initialize/assets.rb 加入 precompile

3) 修改 css 引入的 fonts

  1. 將 url 改成 asset-url 參考本文 Sass helper -> 用法
  2. 如果網站使用的是 HTTPS, 那麼如果 css 有引入 http 的 font 都要改成 https, 否則瀏覽器會拒絕載入

Error

ActionController::RoutingError (No route matches [GET] “/assets/dashboard/jquery.min.map”)

能將 minify 後的變數從 a b c 轉回原本的, 它在 jquery.min.js 最後一行 //# sourceMappingURL=jquery.min.map, 如果不需要可以直接刪掉

讓 js 檔可以取得 Route Path

application.js.erb : (注意! 副檔名是 .erb)

Rails.application.routes.url_helpers.*_path

# ex:
Rails.application.routes.url_helpers.edit_post_path

Comments