20170305深圳Meetup Rails中CSS，JS引用关系分析

新手上路，若有错误请及时提醒
Rails中CSS，JS引用关系分析
Rails中静态资源管理（Asset Pipeline功能，上面机制的实现）
- Asset Pipeline功能依赖gem

新手上路，若有错误请及时提醒

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'

更多详情，文章针对rails4，不是最新