作用:连接文件,压缩文件,使用更高级的语言编辑

#1.连接文件
在生产环境中,所有的css文件会连接成为application.css文件,所有的js文件会连接成为application.js文件

#2.压缩文件
对于CSS文件,会删除空格和注释。对于JavaScript文件,可以进行更复杂的处理,我们可以从内置选项中选择处理方式
config.assets.css_compressor = :yui #默认使用sass-rails这个gem进行压缩
config.assets.js_compressor = :uglifier #使用uglifier这个gem进行压缩

#3.使用更高级的语言编辑静态文件
gem 'sass-rails' #使用sass文件书写css文件
gem 'coffee-rails' #使用coffeescript文件书写javascript文件

涉及到的gem

#gemfile
gem 'sass-rails'
gem 'coffee-rails'
gem 'uglifier'

#gemfile.lock
gem 'sprockets-rails'  #rails使用sprockets组织和编译assets,上面的gem皆需要依赖sprocket-rails这个gem

application.js和application.css代码解释

#application.js
//= require rails-ujs  #这个文件会从gem的安装目录中获取
//= require turbolinks #同上
//= require_tree .  #会获取app/assets/javascripts文件下面的所有js文件,包括文件夹下面的所有js文件
//= require demo

#require demo的查找路径
app/assets/javascripts, lib/assets/javascripts, vendor/assets/javascripts
#若js文件包含在以上三个目录的文件夹内部,比如lib/assets/javascript/sub/demo.js中,则引用方式如下
require sub/demo
#系统会包含application.js中的js代码,若在这里写代码,需要写在最下面
#application.css
/*
 *= require_tree . #会获取app/assets/stylesheets文件下面的所有css文件,包括文件夹下面的所有css文件
 *= require_self  #会包含自身文件的css代码
 *= require demo
*/
#require demo的查找路径
app/assets/stylesheets, lib/assets/stylesheets, vendor/assets/stylesheets
#若css文件包含在以上三个目录的文件夹内部,比如lib/assets/stylesheets/sub/demo.css中,则引用方式如下
/*
*= require sub/demo
*/
#系统会包含application.css中的css代码,若在这里写代码,需要写在最下面

precompile

#预编译,自己的理解是将高级语言编译成为css和js语言,生成类似global-908e25f4bf641868d8683022a5b62f54.css形式

#开发环境中,系统会自动进行预编译,只是applicaton.js中包含的文件都是单独罗列出来,通过源码可以查看

#生成环境中,需要进行预编译,代码如下
RAILS_ENV=production bin/rails assets:precompile

#默认情况下是对application.js和application.css文件进行预编译,但是可以改变预编译的文件
#application.html.erb
<%= stylesheet_link_tag 'welcome', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'welcome', 'data-turbolinks-track': 'reload' %>
#config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( welcome.js welcme.css ) #必须带后缀

results matching ""

    No results matching ""