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

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.jsapp/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,不是最新

20170305深圳Meetup Rails中CSS,JS引用关系分析的更多相关文章

  1. springboot 项目中css js 等静态资源无法访问的问题

    目录 问题场景 问题分析 问题解决 问题场景 今天在开发一个springboot 项目的时候突然发现 css js 等静态资源竟然都报404找不到,折腾了好久终于把问题都解决了,决定写篇博客,纪录总结 ...

  2. SpringMVC中css,js,图片等静态资源被拦截的解决办法

    一.静态资源的存放路径 css,js,图片等静态资源存放在项目的路径必须为 二.html.jsp导入静态资源文件 html.jsp页面中的导入静态资源文件: js: css: 图片: 二.web.xm ...

  3. 关于Yii2中CSS,JS文件的引入心得

    js和css的引入 use yii\helpers\Html; 1.全局引入,所有的view生效 /assets/AppAsset.php public $css = [ 'css/site.css' ...

  4. ASP.NET MVC 中CSS JS压缩合并 功能的使用方法

    通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...

  5. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

  6. Java中CSS&JS篇基础笔记

    HTML就是由一组标签所组成的.HTML的字体标签: <font>标签: 属性:color,size,face HTML的排版标签: h标签:标题标签. p标签:段落标签. b标签:加粗标 ...

  7. css的引用关系

    总结:离div标签越近,越先被引用 先在同级目录下新建一个stylesheet(是以.css结尾的)注意:link引入进来的css中,class标签也是c1,因为html中div class=c1,因 ...

  8. Django:ORM中ForeignKey外键关系分析

    假设有两张表,Role和User,因为多个用户会对应一个角色,属于多对一关系,所以User中的rolename字段使用ForeignKey,第一个参数为要关联的表Role,第二个参数related_n ...

  9. maven-replacer-plugin 静态资源版本号解决方案(css/js等)

    本文介绍如何使用 maven 的 com.google.code.maven-replacer-plugin 插件来自动添加版本号,防止浏览器缓存. 目录 1.解决方案 2.原始文件和最终生成效果 3 ...

随机推荐

  1. R语言 which() 、 which.min() 、 which.max() 函数

    函数 which() 可以用来找到满足条件的下标,如 x <- c(3, 4, 3, 5, 7, 5, 9) which(x > 5) 5 7 seq(along=x)[x > 5] ...

  2. redis服务器性能优化

    1.系统内存OOM优化 vm.overcommit_memory Redis会占用非常大内存,所以通常需要关闭系统的OOM,方法为将“/proc/sys/vm/overcommit_memory”的值 ...

  3. 「JLOI2011」飞行路线

    前言 看到好多大佬都在跑分层图最短路,\(\text{DP}\) 解法的我瑟瑟发抖... 题目描述 给定一张 \(N\) 个点(点编号从 \(0\) 到 \(N-1\)),\(M\) 条边的无向带权图 ...

  4. UniGUI之Login窗口(10)

    在UniGUI的CHM帮助里读到的. 一定要新建一个其他空白的工程,然后再添加LoginForm LoginForm 是另一种特殊的表单类型, 仅用于登录目的. 此操作将创建一个与常规窗体外观相同的空 ...

  5. Java 5 、6、 7中新特性

    JDK5新特性(与1.4相比)[转] 1 循环 for (type variable : array){ body} for (type variable : arrayList){body} 而1. ...

  6. nginx反向代理(2)

    目录 nginx缓存 基本概念 常用模块 proxy_cache 超时相关 常见架构 ========================================================= ...

  7. 【转】彻底搞透Netty框架

    本文基于 Netty 4.1 展开介绍相关理论模型,使用场景,基本组件.整体架构,知其然且知其所以然,希望给大家在实际开发实践.学习开源项目方面提供参考. Netty 是一个异步事件驱动的网络应用程序 ...

  8. 机器学习(ML)十一之CNN各种模型

    深度卷积神经网络(AlexNet) 在LeNet提出后的将近20年里,神经网络一度被其他机器学习方法超越,如支持向量机.虽然LeNet可以在早期的小数据集上取得好的成绩,但是在更大的真实数据集上的表现 ...

  9. PHP如何查找一列有序数组是否包含某值(二分查找)

    问题:对于一列有序数组,如何判断给出的一个值,该值是否存在于数组. 思路:判断是否存在,最简单是,直接循环该数组,对每一个值进行比较.但是对于有序数组来说,这样写就完全没有利用好“有序”这一特点. 所 ...

  10. MySQL性能调优语句

    mysql>show global status; 可以列出MySQL服务器运行各种状态值 一.慢查询 mysql> show variables like '%slow%'; mysql ...