I have multiple files in my app/assets/javscripts folder, application.js.erb, page.js.erb, sections.js.erb & scraped.js.erb.
Rails loads them all in my layout with <%= javascript_include_tag "application" %> in application.html.erb layout. Which is called from the PagesController.
I do not want scraped.js.erb to be loaded at all & sections.js.erb I would like to only be loaded from the SectionsController.
From my understanding (after reading http://guides.rubyonrails.org/asset_pipeline.html) that's how the asset pipeline worked. That if called from the PagesController it would load application.js.erb & page.js.erb but obviously that's not the case.
Am I doing something wrong? Could someone explain to me how the asset pipeline works? And how I can only use select assets rather than all of them?
Check your manifest file, in assets/javascript you got the file application.js, it contains
//= require_tree . which include during compilation all files of the directory tree.
If you want to exclude some files you can either require your files one by one: // require my_file, either create sub directories in your javascript directory and use
//= require_directory my_directory
Read more http://guides.rubyonrails.org/asset_pipeline.html
Related
I am constantly getting this error
Asset filtered out and will not be served: 'Rails.application.config.assets.precompile..."
and so on for both
<%= stylesheet_link_tag "login" %>
<%= javascript_include_tag "login" %>
I've searched on stackoverflow and read things to find out that I can simply just add the files into the precompiled list as the error says, but I don't know why I have to add this is when I already have the manifest file with
//= require_tree .
I've seen ruby applications where manifest files take care of the job. What's happening?
You're confused about what the manifest does.
//= require_tree . only merges those files into a single large file, whatever file the manifest is in. (Presumably application.js; the whole point being that Sprockets generates a single file that users can cache, instead of needing to load multiple.) It doesn't keep them around as separate files--for that you need to insert them in your assets.rb, as suggested.
add login.css and login.js into your config/initializers/assets.rb
more information is described under Precompiling Assets Guide
Is there a way to add all files in Vendor third party libraries with sepearate application.css and application.js file?
Can I just add those two files under Vendor folder and require_tree from there like below?
/*
*= require_tree assets/stylesheets/.
*/
Some say that I should include in app/assets/stylsheets/application.css file but I think there is another way like above.
You can do that with a little bit tweak
Sprockets uses files named index (with the relevant extensions) for a special purpose.
For example, if you have a jQuery library with many modules, which is stored in lib/assets/library_name, the file lib/assets/library_name/index.js serves as the manifest for all files in this library. This file could include a list of all the required files in order, or a simple require_tree directive http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives (See 2.2.2)
That is said, say your vendor CSS directory is vendor/assets/css/foo, with the following files
/foo
bar.css
baz.css
Then you can create a file foo/index.css with following content
/= require_tree ./
Then you can include this lib in your main application.css as
/= require foo
Disclaimer
I have not used the above technique by myself. I just followed the guide and made assumption.
I myself recommend require CSS one by one as order matters in CSS. Even the files are in vendor, you can require them directly in application.css like
/= require foo/bar
/= require foo/baz
Try putting this in your javascript file (vendor.js):
//= require_tree ../../../vendor/assets/javascripts/.
and this in your css file (vendor.css):
//= require_tree ../../../vendor/assets/stylesheets/.
You could put these in app/assets/stylesheets/vendor.css or app/assets/javascripts/vendor.js, and then include them in your _head.html.erb partial:
<%= stylesheet_link_tag "vendor", :media => "screen, projection" %>
<%= javascript_include_tag "vendor" %>
Make sure to add these to your assets to be precompiled as well (config/environments/production.rb):
config.assets.precompile += ['vendor.css', 'vendor.js']
Also, cool username! :D
I'm a little confused by when I need to add an asset to config.assets.precompile and when it's not necessary.
(It's possible that my problem may stem from the fact that this app was migrated from rails 2.x; at some point soon I'm going to rebuild it from the ground up as a 3.x app, but don't have the time for that yet.)
Here's my issue: I have a .css and .js files that are not being found by sprockets unless I add them to config.assets.precompile in application.rb. I can't imagine I have to do this for every .js and .css, do I?
For example, one file I'm having this issue with is app/assets/stylesheets/facybox.css.
application.css is:
/*
*= require_self
*= require_directory .
*/
(yes, require_directory instead of require_tree intentionally).
I run rake assets:precompile on my server during deploy. The resulting application.css has the contents of facybox.css in it.
facybox.css is referred to in a partial, like this:
<% content_for :header do %>
<%= stylesheet_link_tag "facybox" %>
<% end %>
But when I go to a page that includes the partial, I get:
Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError in Admin#compositions
Showing /srv/zmx/releases/5420c4dde6fbec53d78cffe78396085f263ed039/app/views/shared/_preview_assets.erb where line #6 raised:
facybox.css isn't precompiled
which I assume is because sprockets is looking for the fingerprinted copy of the file, which doesn't exist unless I add it to config.assets.precompile. Then all is hunky-dory.
Can someone explain?
The rules for precompiling are simple:
If an asset is required in one of the application manifests you do not need to add it to precompile.
If an asset needs to be referenced directly in a Rails view then you DO need to add it (and you should remove it from any manifests).
As you said yourself, the contents of facybox.css are already included in your application.css.
This means that you can just remove the stylesheet_link_tag from your partial and also any other places where you use facybox.css. You would have to do the same for all other stylesheets that you already have included in your application.css
I'm trying to make this work but it's driving me mad. I already set this in
application.rb
config.assets.paths << Rails.root.join("vendor", "assets", "javascripts").to_s
(.to_s because it returns an object while I want a string in here).
I cant find the solution and is driving me mad, because stylesheets directory in vendor works, but javascripts is not.
How can i do this?
Error returned:
<h1>Routing Error</h1>
<p><pre>No route matches [GET] "/assets/ext-all-debug.js"</pre></p>
I believe vendor is already included in your assets path, check using the rails console
rails console
Rails.application.config.assets.paths.each do |path|; puts path; end
However the easiest thing might be this
put ext at app/assets/javascripts/lib
require_tree will load it already or be explicit
application.js
//= require ./lib/ext-all-debug.js
If you really want it in vendor
create dir vendor/assets/javascripts/ext
create manifest file vendor/assets/javascripts/ext/index.js
put ext-all-debug.js into vendor/assets/javascripts/ext/
code for index.js
//= require ./ext-all-debug.js
code for application.js
//= require ext
that is the name of the dir that the index manifest file is located
Restart your rails server
if you don't want to load extjs via application.js, i.e. you want to include the extjs lib only on specific pages
<%= javascript_include_tag "ext" %>
You can add:
//= require_tree ../../../vendor/assets/javascripts
to your application.js file.
READ THE UPDATE
It looks like the problem is connected to the fact that EXT has it's own structure path build with relative paths.
I solved the problem by preserving the whole ext directory structure as is (without splitting images anywhere) and I added it to a vendor/externals directory (created by me). I then added the path with:
config.assets.paths << Rails.root.join("vendor", "assets", "externals").to_s
And now everything it's working fine by referencing it with //= require ext-all-debug.js
Update 23/12/2013:
As of Rails 3, notice that this directory has been added by default.
It's not easy to see the problem from the information you've provided as I think that the problem is elsewhere.
The purporse of asset pipeline is to to put all javascripts into one file. And that file is included to the HTML document. So the key is that one big JS file. Well, it can be more complicated but I think that's not necessarily your case.
So for example in your layout ERB (typically app/views/layout/application.erb):
<head>
...
<%= javascript_include_tag "application" %>
</head>
and in app/assets/javascripts/application.js:
//= require ext_all_debug
//= ...
When HTML page is requested, it asks for "application.js" and it is generated in a way that your vendor JS code is embedded into this file (notice that there is no path in that require).
And one last thing - it's quite important to test the behaviour in production environment because typically those generated JS files will be served by nginx/apache. rake assets:precompile is a good start.
I'm a bit confused as to where to put a jQuery framework like Galleria in Rails 3.1's new Asset Pipeline?
I know it, technically, should go into /vendors/assets/javascripts but, it is my understanding that, the Galleria folder with the jQuery & themes wants to be in root (/galleria) of the live site in order to work correctly.
Also, while we're at it, where to put the following script so it will appear only on the page(s) with a gallery?
<script>
$('#gallery').galleria({
width:500,
height:500
});
</script>
Edit: Surprised there's no response!?! Maybe Galleria isn't that popular? These are the files I'm trying to load. They are bundled like this though I could easily move them:
vendor/
assets/
javascripts/
galleria-1.2.5.js
galleria-1.2.5.min.js
galleria/
themes/
classic/
classic-loader.gif
classic-map.png
galleria.classic.css
galleria.classic.js
galleria.classic.min.js
i thought Sprockets require_tree . would load everything in app/assets, lib/assets and vendor/assets?!?
I had the same problem, and it took a while to get working. Initially, it would work fine on development, but when we moved to production, Galleria silently failed, due to the asset filenames now having "fingerprints". This also seems to be an issue with jQuery UI themes, and many other such scripts.
Of course, you could just go back to the old way of doing things and throw everything in "public", but we would like the advantage of automatically merging all css/js files, and doing things the rails way.
This is how I got it working:
vendor/
assets/
images/
classic-loader.gif
classic-map.gif
javascripts/
galleria-1.2.5.js
galleria.classic.js
stylesheets
galleria.classic.css.scss
Rename your galleria.classic.css file to galleria.classic.css.scss. Then replace the image references, like so (I had two):
url("classic-loader.gif") becomes image-url("classic-loader.gif")
UPDATE: It looks like you don't need to do this in Rails 3.1.1. Just rename the file to .css.scss and rails will automatically preprocess the url() calls for you.
In your app/assets/javascripts/application.js file, make sure you have the lines
//= require galleria-1.2.5
//= require galleria.classic
//= require_tree .
In you app/assets/stylesheets/application.css file, make sure you have the lines
*= require galleria.classic
*= require_tree .
Finally, Galleria seems to have some fancy non-standard css loading built in. This is what was preventing Galleria from loading on our production website. Since we have already included the stylesheet, we want to disable this behavior. Simply open up galleria.classic.js (or your Galleria theme javascript file), and replace the line:
css: 'galleria.classic.css',
with:
css: false,
This will tell Galleria not to try loading the stylesheet.
One more thing - when trying to compile these assets, I ran into what is apparently a bug in Rails 3.1.0. When I ran rake assets:precompile, I got errors like:
$ bundle exec rake assets:precompile
rake aborted!
classic-loader.gif isn't precompiled
(in /vendor/assets/stylesheets/galleria.classic.css.scss)
Long story short, you need to set this line in config/environments/production.rb:
config.assets.compile = true
This shouldn't be necessary once 3.1.1 is released.
I like Arjen's suggestion, though I think vendor/assets/libs is more appropriate. Here's my setup:
In config/application.rb
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/vendor/assets/libs"
In app/assets/javascripts/application.js
//= require galleria/galleria-1.2.6.min.js
To initialize:
Galleria.loadTheme('assets/galleria/themes/classic/galleria.classic.min.js');
$('#gallery').galleria();
Notice how the path passed to loadTheme() begins with 'assets'.
I like this setup because it keeps the galleria folder intact. Also, it concatenates galleria-1.2.6.min.js onto my main js file (one less http request).
I've also stumbled upon this problem. Dividing up an existing library so it fits into the current javascripts/stylesheets structure is a bit of a hassle. Therefor you can add an extra path to your application.rb file to load assets from, like this:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/libs"
Create a 'libs' folder under app/assets, copy the galleria library to this folder and add this to your application layout file:
<%= javascript_include_tag 'galleria/galleria-1.2.4.min.js' %>
<%= javascript_include_tag 'galleria/themes/classic/galleria.classic.min.js' %>
You could also bundle up the galleria code by requiring the js files, but that's up to you.