20170305深圳Meetup Rails中CSS，JS引用关系分析
新手上路，若有错误请及时提醒
Rails中CSS，JS引用关系分析
一、Rails静态文件存放位置
可以放在三个位置：app/assets，lib/assets 或 vendor/assets。目前主要用到的是app/assets目录
- app/assets：存放程序的静态资源，例如图片、JavaScript 和CSS；
- lib/assets：存放自己的代码库，或者共用代码库的静态资源；
- vendor/assets：存放第三方的静态资源，例如 JavaScript 插件，或者 CSS 框架；
二、Rails中CSS引用方式
html.erb加载CSS文件的代码是这句
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
其中'data-turbolinks-track': 'reload'表示自动跟踪加载新版文件，没新版就使用缓存
application是加载目标:app/assets/stylesheets/application.scss
再看看application.scss里有什么，如何工作的：
*
*= require_tree . 引入当前目录树下的css文件
*= require_self 引入当前文件（也就是下面三行import）
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";
结论：那么html.erb文件中的stylesheet_link_tag 'application'其实就引用了app/assets/stylesheets/下所有css文件
生成网页html效果如下（一长串乱码是自动生成的文件版本效验码）：
<link rel="stylesheet" media="all" href="/assets/account/orders.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/admin/orders.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/admin/products.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/cart_items.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/carts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/layout_min.self-0922e518b4cea83b62a086f1e87995c76bec4445e7b10033edd77073ec5f23a3.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/normalize.self-0417591869b6d8f7ce4deaae0ff36b6d2e98bb5f109ae79ba6515ce27ca44fa8.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/orders.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/products.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/welcome.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-8ef71f73b7cfab3a77b0f7944cda783a4e4d443e777d10cd50cc159b22db8c8a.css?body=1" data-turbolinks-track="reload" />
三、Rails中JS引用方式与CSS类似
html.erb文件中
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
application是加载目标:app/assets/javascripts/application.js
application.js文件内容如下
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree . 引入当前目录树中的js文件
//= require bootstrap/dropdown
//= require bootstrap/alert
生成网页html效果：
<script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/account/orders.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/admin/orders.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/admin/products.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/action_cable.self-1641ec3e8ea24ed63601e86efcca7f9266e09f390e82199d56aa7e4bd50e1aa9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cart_items.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/carts.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/orders.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/products.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/welcome.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/dropdown.self-561cca1cbaf67474e01e9536f106bad541594860a6df997004591c1c1957a147.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/alert.self-742145c5bb847aafdadc6e339be795628f8bc25f177e851f03a8c42278eb0312.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-9b9be17d3c356f1a9a23b03b3b5d01bb4e46845459cc7ac189cd20f571fefb23.js?body=1" data-turbolinks-track="reload"></script>
四、上面都是默认引用application的所有css，js文件，那么如何为某个网页指定加载某些css，js文件集合呢？
假如你需要在网页中引入一个css文件集合add_css，一个js文件集合add_js【单个文件、文件集合是一回事】
第一步：分别创建app/assets/javascripts/add_js.js和app/assets/stylesheets/add_css.scss文件
第二步：模仿对应的application.xxx文件，内部引入其他js、css文件形成集合
第三步：使集合生效，可被引用
修改config/initializers/assets.rb文件
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
"这位置添加你需要定制的js、css集合信息， application.js, application.css是默认被添加的"
Rails.application.config.assets.precompile += %w( add_css.css )
Rails.application.config.assets.precompile += %w( add_js.js )
第四步：在网页html.erb文件中引用js，css
<%= stylesheet_link_tag 'add_css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'add_js', 'data-turbolinks-track': 'reload' %>
效果
<link rel="stylesheet" media="all" href="/assets/carts.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/orders.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/add_css.self-9da70418572a71afc8af4a47ad2127583ae7f407b7ae0fb1d3a41d17b8fc97b0.css?body=1" data-turbolinks-track="reload" />
<script src="/assets/cart_items.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/add_js.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1" data-turbolinks-track="reload"></script>
Rails中静态资源管理（Asset Pipeline功能，上面机制的实现）
Asset Pipeline功能依赖gem
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
