3

I have an external css, javascript and Images files in a separate project and wanted to include in my new rails project. Here is my structure of folders:

external-assets/js/ <Files>
external-assets/js/plugin/<Files>
external-assets/css/<Files>
external-assets/css/plugins/<Files>
external-assets/images/<some Folders>/<Files>
external-assets/images/<Files>

So, I copied external-assets/js folder to app/assets/javascript and for css I copied external-assets/css to app/assets/stylesheets.

and replace <link rel="icon" href="external-assets/css/plugins/bootstrap.min.css"> to <%= stylesheet_link_tag "/plugins/bootstrap.min.css" %> in my html.erb file. I followed the same thing for other css files and js files. When I start the server I got this error:

Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( style.css )` to `config/initializers/assets.rb` and restart your server

After searching on SO post like: Asset filtered out and will not be served: add `config.assets.precompile and Asset filtered out and will not be served. I need to mention my all js and css files to config.assets.precompile.

Questions

1) Do I really need to mention all of js, css and images file? I know the reason but I do have a lot of assets files.

2) What about If I put them in public folder? Is it good approach?

3) There is stylesheet_link_tag for css , javascript_link_tag for js. What about Images?

Community
  • 1
  • 1

3 Answers3

2

Do I really need to mention all of js, css and images file? I know the reason but I do have a lot of assets files.

No.

Sprockets has the require directives which concatenate any files you "require" into your application file...

#app/assets/javascripts/application.js
//= require x

What you want? Probably not... but it at least gives you the ability to call one file (application), whilst benefitting from the content of all the others.

2) What about If I put them in public folder? Is it good approach?

No.

Precompiling assets puts the minified versions into public/assets anyway.

3) There is stylesheet_link_tag for css , javascript_link_tag for js. What about Images?

image_tag

Assets

I think you're getting confused about the role of "external" assets.

If an asset is truly external (such as Google's JQuery repo), you'll be able to reference them by using the javascript_include_tag or stylesheet_link_tag respectively:

<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" %>

This will basically add the following to your layout at runtime:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

If this is what you want, you'll be best adding the external repos calls to your #app/views/layouts/application file (as above).

-

Rails Assets

However....

They're obviously not "external" assets if you have them stored locally.

So you're either going to have to call them from their real external repositories, or use them locally in your app.

If you're happy using them locally (which carries the responsibility of keeping them updated), you may wish to look at Rails Assets:

enter image description here

This is a gem repository (you have to add source https://rails-assets.org to your Gemfil), which allows bundler to ping their server for asset-based gems.

It is meant to work like Bower - taking any of the public repos and converting them into gems. It allows you to call external repos into your app:

#Gemfile
gem "rails-assets-jquery.easing"

#app/assets/javascripts/application.js
//= require jquery.easing

This will basically store a local version of the JS / CSS you wish to use in your asset pipeline, allowing you to include it with the sprockets require directive.

The big difference is that since these assets are downloaded through the gem system, they will be updated each time you run bundler.

We use it, and although it can be a little tricky sometimes, it's well worth it.

Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • Thanks for your explanation (I was expecting your answer :) ) But How about those custom css and js I added in my external project? How can I add them in rails project? When I am adding them getting error post in post –  Oct 31 '15 at 14:18
1

  1. Either put it all into the public directory, and then use the html <script>, <link>, ≤img> tags to reference the assets. You will lose some Sprockets features like minification and digesting, but that's not a big deal.

  2. Mention all the assets in the application.css / application.js, or create a new manifest file, e.g. custom.css / custom.js, list the assets to use here and then add those two files into the:

    Rails.application.config.assets.precompile += %w( custom.css custom.js )
Dmitry Sokurenko
  • 6,042
  • 4
  • 32
  • 53
0

Do you have require _ tree in your application.js & application.css? If not, just add it to both files and restart your server.

The require_tree directive tells Sprockets to recursively include all JavaScript files in the specified directory into the output. These paths must be specified relative to the manifest file. You can also use the require_directory directive which includes all JavaScript files only in the directory specified, without recursion.

Check out this guide

Hope it helps. :)

Brittany Hicks
  • 34
  • 4