2016-01-11 4 views
3

Я только начинаю с рельсов и загружаю внешние ресурсы, такие как css и js. Читая в нескольких местах, я узнал, что css должен быть размещен в app/assets/stylesheets и js внутри app/assets/javascripts. После этого я позвонил мой css и js в моем файле представления, какгде положить внешние css и js в рельсы

<%= stylesheet_link_tag "<<path to my css>>" %> 

для CSS и

<%= javascript_include_tag "<<path to my js>>" %> 

и я включил эту линию внутри моего config/initializers/assets.rb

Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/] 

но делать это дало мне какая-то ошибка компиляции. Но я не уверен, правильно ли это или нет для загрузки внешнего ресурса. Где другое место, которое мне нужно изменить, чтобы загрузить css и js, а также наилучшую практику включения внешних ресурсов в rails с точки зрения производительности ,

ответ

2

Asset Pipeline

Что вы имеете в виду что-то ING называется asset pipeline - папка app/assets, где вы храните все «зависимые» файлы для вашего HTML - css/js/images т.д.

Конвейер актива очень прост -

Конвейер актива обеспечивает структуру для конкатенации и минимизации или сжатия ресурсов JavaScript и CSS. Он также добавляет возможность писать эти активы на других языках и предварительных процессорах, таких как CoffeeScript, Sass и ERB.

Это функция, чтобы предоставить вам способ «собрать» Ваш CSS/JS в конденсированной (minified) файлы, которые вы можете вызвать в вашем фронтального HTML. Конечная цель - сделать ваши «активы» настолько малыми, насколько это возможно, поэтому ваша страница загружается быстрее всего.

-

В вашем случае, вы хотите посмотреть Sprockets Manifest Directives -

#app/assets/stylesheets/application.css 
/* 
    *= require self 
    *= require_tree . 
*/ 

выше будет принимать каждый файл CSS в app/assets/stylesheets и объединить их в один файл application.css:

#app/views/layouts/application.html.erb 
<%= stylesheet_link_tag :application %> 

Так, чтобы ответить на ваши Ques непосредственно вам нужно хранить внешние таблицы стилей в папке app/assets/stylesheets.

Если у вас есть «реальный» внешнюю таблицу стилей (поддерживаемым Google или что-то), вы хотите, чтобы включить его в свой layout следующим образом:

#app/views/layouts/application.html.erb 
<%= stylesheet_link_tag :application, "http://cdn.google.com/stylesheet.css" %> 
2

После того, как вы добавите свои css и js в соответствующую папку, вам потребуются эти файлы в application.js и application.css, а затем вы можете включить эти два файла в свой html. Попробуйте следующий код:

application.css

//= require abc 

application.js

//= require xyz 

В вашем HTML:

<%= stylesheet_link_tag "application" %> 
<%= javascript_include_tag "application" %> 
Смежные вопросы