范例专案: https://github.com/ihower/jdstore 参考资料: https://ihower.tw/rails/
git clone https://github.com/ihower/jdstore.git ihower-jdstorecd ihower-jdstorebundlerake db:migraterake db:seedrake dev:fake这会产生假用户、产品和订单rails s
- 静态档案(static file，又叫做 asset) 指的是 CSS, JavaScript 和图档(images) 等：无论哪个用户、所有浏览器拿到的档案都一样
- 相对于动态档案：动态档案指的是经过 Rails 程序产生的 HTML 页面(xxx.html.erb)
- 在 Rails 目录中，放在
public目录下的是静态档案，浏览器可以直接读取，不会经过 Rails 程序 🖥- 在
public目录找不到檔案的話才會進到 Rails Router 路由系統
- 在
- 除了
public目录，Rails 也可将静态档案放在app/assets目录下，由 Rails 统一管理打包这些静态档案，这功能叫做 Asset Pipeline。用户浏览器不能直接访问app/assets目录，在本地开发的时候，会经过 Rails 程序回传这些静态档案。部署上 production 服务器时，会先执行rake assets:precompile产生静态档案放在public/assets目录下，让浏览器可以访问。
如果用 Capistrano 部署在 Linode 服务器，会在
cap production deploy过程中在服务器上执行rake assets:precompile。如果用Heroku 请参考Rails Asset Pipeline on Heroku Cedar 说明，在本地执行rake assets :precompile将产生的public/assets目录commit 进 git 库，再 push 上 Heroku。
- Manifest 档案是进入点，这个档案会列出要载入哪些档案，预设是：
app/assets/javascripts/application.jsapp/assets/stylesheets/application.css
- 接著在
layout/application.html.erb中，会用以下这两行来载入进入点 🖥<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %><%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
- 在 Manifest 档案中，会用
//= require写法列出要载入的 css 和 js 档案 🖥- 尽量不要用
require_tree，因为 css 和 js 是会依照载入顺序执行的，后载入的会覆盖前面的，载入顺序很重要⚠️ - 不只
app/assets/可以载入得到、放lib/assets和vendor/assets也可以载入得到，那些放在 gem 库里面的也载入得到。我们会将第三方的 css/js 库的源码放在vendor/assets下来区别 🖥
- 尽量不要用
- 放
app/assets/images的图档，也必须透过 Rails helper 才能够访问到 (因为有 fingerprint 的关系，不透过 Rails helper 你不知道最后的档名) 🖥- 在 erb 中用
image_tag或asset_path - 在 js 需要改档名为
js.erb就可以用 rails helper - 在 Sass 中可以用
image-url
- 在 erb 中用
- Asset Pipeline 在本地开发 development 和部署上 production 的实际运作不一样：本机开发时是拆开载入，方便除错。上 production 时才会打包压缩。
⚠️ 因此专案千万不要最后一天才部署上 Production，因为有些前端问题是在 Production 环境上才会发生，不要拖到最后一天才发现!!!! 会逼死人。
- 方便装 gem (Ruby的库) 进行管理，不需要将 gem 里面的静态档案也搬进
public目录下搅在一起。 - 上 production 部署时，会打包压缩成为一个档案，加速浏览器下载 🖥
- 档名会有 fingerprint，一但内容有修改就会变动，避免浏览器缓存，让用户总是访问到最新的档案 🖥
- pre-processing 功能: Sass 和 CoffeeScript，可以用其他语言写 CSS 和 JavaScript。
前端世界五花八门，充满各式各样的 CSS/JavaScript 套件，我们可以从 jQuery plugins 开始 google 起，再 google 找找看有没有 Bootstrap 样式。接下来....
- 看看官网的文件，是否满足需求，合用吗?
- google 看看有没有包好的 gem 在 github 上
- 观察看看这个 gem 包的版本是? gem 的版本和前端库的版本，是两回事。检查看看最后的 commit 时间、有没有人关注、有没有人维护啊
- 如果版本过旧没人维护，就不要用这个 gem 了。其实大部分前端用途的 gem 只是包裹 js/css 而已，你可以直接拿 js/css 源码来用，方法如下：
如果这个套件全站常用，建议可以一起打包进 Asset Pipeline：
- 把 css/js 源码放到
vendor/assets下，就可以require载入到了 - 如果 css 內有用到图档，建议不要放进
app/assets/images里面，因为这样要改css很麻烦。
如果这个套件只是少数页面用到而且档案大小超过数百Kb，建议就不经过 Asset Pipeline 了：
- 可把 css/js 代码放
public目录下，在HTML 里直接用<link href="//xxx.css" rel="stylesheet">和<script src="//xxx.js" ></script>就可以访问到了。 - 或是找免费的 CDN 服务提供静态档案。 CDN (Content Delivery Network) 看名子好像很厉害，就是用别人的服务器的意思。别人的服务器可能离用户更近、频宽更大、下载更快。记得要挑有国内服务器的 CDN 服务，例如 BootCDN 或 Staticfile CDN，不要傻傻地複製國外官網上的CDN位址。
以下我们藉由案例来实际说明如何安装使用：