20170305 Shenzhen Meetup CSS in Rails, JS reference link analysis, 20170305 meetup

20170305 Shenzhen Meetup CSS in Rails, JS reference link analysis, 20170305 meetup

• New users are on the road. Please remind me of any errors
• CSS and JS reference Link Analysis in Rails
  • I. Rails static file storage location
  • Ii. CSS reference in Rails
  • Iii. JS references in Rails are similar to CSS references.
  • 4. All css and js files of the application are referenced by default. How can I specify to load certain css and js file sets for a webpage?
• Static Resource Management in Rails (Asset Pipeline Function, implementation of the above mechanism)
  • The Asset Pipeline function depends on gem.

Newbie. If any error occurs, please promptly remind CSS in Rails, JS reference Link Analysis 1. Location of static Rails files

It can be placed in three locations: app/assets, lib/assets, or vendor/assets. Currently, the app/assets Directory is used.

• App/assets: stores static resources of the program, such as examples, JavaScript, and CSS;
• Lib/assets: stores your own code library or static resources that share the code library;
• Vendor/assets: stores third-party static resources, such as JavaScript plug-ins or CSS frameworks;

Ii. CSS reference in Rails

The code for loading the CSS file in html. erb is

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Where'data-turbolinks-track': 'reload'Indicates automatic tracking and loading of new files. cache is used when new files are not updated.

applicationIs the loading target:app/assets/stylesheets/application.scss

Let's take a look at what works in application. scss:

** = Require_tree. introduce the css file * = require_self under the current directory to introduce the current file (that is, the following three lines of import) */@ import "bootstrap-sprockets"; @ import "bootstrap "; @ import "font-awesome ";

Conclusion: In the html. erb filestylesheet_link_tag 'application'Actually, it is referenced.app/assets/stylesheets/All css files

The following figure shows how html is generated (a long string of garbled characters is an automatically generated file version Verification Code ):

<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" />

Iii. JS references in Rails are similar to CSS references.

Html. erb File
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

applicationIs the loading target:app/assets/javascripts/application.js

application.jsThe file content is as follows:

// = Require jquery // = require jquery_ujs // = require turbolinks // = require_tree. introduce the js file in the current directory tree // = require bootstrap/dropdown // = require bootstrap/alert

Generate the html effect of the webpage:

<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>

4. All css and js files of the application are referenced by default. How can I specify to load certain css and js file sets for a webpage?

Suppose you need to introduce a css file set add_css In the webpage, and a js file set add_js [Single file, file set is one thing]

Step 1: Createapp/assets/javascripts/add_js.jsAndapp/assets/stylesheets/add_css.scssFile
Step 2: Simulate the corresponding application. xxx file and introduce other js and css files to form a set.
Step 3: Make the set take effect and can be referenced

Modifyconfig/initializers/assets.rbFile

# 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) "add the js and css set information you need to customize in this location, application. js, application.css is the default added "Rails. application. config. assets. precompile + = % w (add_css.css) Rails. application. config. assets. precompile + = % w (add_js.js)

Step 4: Reference js and css in the html. erb file of the webpage

<%= stylesheet_link_tag    'add_css', media: 'all', 'data-turbolinks-track': 'reload' %><%= javascript_include_tag 'add_js', 'data-turbolinks-track': 'reload' %>

Effect

<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>

Implementation example

Static Resource Management in Rails (Asset Pipeline Function, implementation of the above mechanism) The Asset Pipeline Function relies on gem

gem 'sass-rails'gem 'uglifier'gem 'coffee-rails'

For more details, the article is not up-to-date on rails4.