I've converted this multi skinned app of mine to make use of the assets pipeline introduced in Rails 3.1. For the most part it's been surprisingly easy and I'm in love with the preprocessing ability which allows you to use inline Ruby in your CSS/JS files.
I have run into a major problem though, which despite the power of Sprockets seems tricky to solve. My app can be run with any number of skins (or "identities" rather) which is chosen at runtime. This "identity" parameter sets up stuff like cache directory, database connection, view paths - and indeed asset paths. While all "identities" can have their own stylesheet there is also a shared one which is used across all instances. So the assets folder structure looks something like this:
In /app/assets/stylesheets/aplication.css.erb:
<% require_asset("shared.css") %>
<% require_asset("overrides.css") %>
This loads two stylesheets, and crucially it uses the configured asset paths to resolve them (that's why i use require_assets instead of the standard require and include directives, as they don't hit the resolver). It returns the first matches found and allows me to very easily override part or whole of the default styling. So
/app/assets/stylesheets/shared.css
can be overridden by putting a file with the same name in the instance assets folder
/app/assets/[identity]/stylesheets/shared.css
and if no such file exists it silently falls back to the default shared.css.
It all works brilliantly - I use the same technique for JavaScripts, images and fonts and everything gets neatly processed and packaged during precompilation. BUT. There is a type of (sideways) inheritance that I'm unable to achieve; sometimes the skin for an identity is so similar to another one that only a few dozen lines differ (e.g. identical layout but with a different color scheme) and I really want to be able to do something like this:
assets/stylesheets/application.css.erb:
<% require_asset("shared.css") %>
<% require_asset("overrides.css") %>
assets/current_identity/stylesheets/overrides.css:
<% require_asset("../../some_other_identity/stylesheets/overrides.css") %>
/* followed by the dozen or so lines that differ for this skin */
...
This FAILS because in the current context "some_other_identity" is not in the asset paths - Rails does not find the file in dev mode, and of course it's not included during precompilation either. And if I do include it in the assets path it loads the wrong overrides.css (there can be only one). So I've been experimenting with putting something like this at the top of overrides.css:
<%= File.read(Rails.root.join("app/assets/some_other_identity/stylesheets/overrides.css")) %>
/* rest of CSS */
...
And indeed that works just as expected. BUT. Because I'm now using the assets pipeline to serve all assets I can no longer reference images in the CSS with a fixed path - I have to use <%= asset_path("some_image.png") %> so that the path resolver can work its magic. This means my overrides.css is really overrides.css.erb, and of course the ERB preprocessing doesn't happen when you do File.read(). So, I'm stuck! Help! Anyone?
Edit: If I use
<%= ERB.new(File.read(Rails.root.join("app/assets/some_other_identity/stylesheets/overrides.css.erb"))).result %>
it does try to parse the ERB, but I get
undefined method `asset_path' for main:Object
which of course is due to me using asset_path("some_image.png") etc in the file I'm trying to include.
Ok, after hours of searching I came upon the list of available helper methods in Sprockets - it would have saved me a lot of time had this been linked to from the Sprockets man page on GitHub (there is a link, but it points to #FIXME). From the Sprockets API docs:
(Object) evaluate(path, options = {})
Reads path and runs processors on the file.
This allows you to capture the result of an asset and include it directly in another.
<%= evaluate "bar.js" %>
Bingo! I changed my include directive to:
<%= evaluate(Rails.root.join("app/assets/some_other_identity/stylesheets/overrides.css.erb")) %>
and the CSS gets processed and the results inserted, just the way I wanted it to work.
Related
So I'm kinda lost here. All my CSS/SCSS files are loaded everywhere on my app. But I have two different design (front and back) that I want to separate. How can I achieve that ?
Plus it's kinda useless that all js/css are loaded, even where they are not used. How can I control that ?
What you're wanting to do is control your layouts.
As your question is currently it's too broad for someone to give you a decent specific answer, it's like saying 'tell me about astrophysics, I don't understand how to launch a rocket right now'.
I would suggest to start with the rails guides relating to layouts and then come back with a more specific question once you have a better understanding.
http://guides.rubyonrails.org/layouts_and_rendering.html
There is also a great 11 minute video on RailsCasts which will help you understand and control the assets pipeline: http://railscasts.com/episodes/279-understanding-the-asset-pipeline
Where you are heading is say your app was about managing projects.
Make a copy of the application.css file called say project-manifest.css and use the same structure as that application.css for loading just the stylesheets you want.
Make a copy of views/layouts/application.html.erb to say projects-layout.html.erb
In the new projecs-layout file, update the reference to the css to point to project-manifest.css
Point your controller code to use your new layout
say you have:
# app/controllers/ProjectsController.rb
def show
# code here
# rails does a default render layout: 'application', its overwritten by adding an explict render
render layout: 'project-layout'
end
In your application.js and application.css there is a directive by default: require_tree. It will load all your js and css files to be precompiled later. This is done to make the clients to download the assets packet only once (as it will be cached by the browser) and make the app faster.
If you want to load specific javascript or stylesheet files for each controller, remove the require_tree directive and include them in their respective controller:
<%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>
Check this out: http://guides.rubyonrails.org/asset_pipeline.html#controller-specific-assets
Don't these two do the same thing?
<%= link_to "Example", '#', class: "somestyle" %>
Example
If I'm writing a static .html.erb page, if everything else is written with HTML tags, doesn't it make sense to use HTML tags for links as well? I'm not sure why one should use a helper. Similarly, for linking style sheets, javascripts, etc.
For the link tags, it may not make a difference which way you go. Unless you're linking to more than "#". For instance, using a routed path.
For the stylesheets and javascript, I think you will need to continue to use the Rails helpers if you're taking advantage of the asset pipeline. If so, the hash in the filename changes at each asset compilation (I believe), and manually trying to edit the filename each time could become a pain.
Ok, I realise this question has been asked many times but the answers never seems to address the issue/question I have with this.
I have a js file that I would like to include on specific pages only. There are many responses that suggest that I put files into folders and then in the manifest file reference only those folders - for example this Railscast (at about 06:20) talks about this.
However, I only have one application layout file (and I guess this could be the area I'm lacking in) - therefore this file points to the application.js manifest and therefore I can't see how I can include things conditionally.
It's a bit like this resource too - http://railsapps.github.io/rails-javascript-include-external.html - scroll down to the page-specific scripts sub heading and it repeats what the Railscast suggests. But nothing is mentioned of multiple application layout files.
If anyone can help me clarify what to do in this situation I would be most grateful.
I should perhaps point out that I'm using Rails 4.
You can use content_for in your views to "inject" content into the layout when said view is to be rendered. See: using-the-content-for-method
You'd need to do a few things to make this happen:
Add the placeholder to yield the content in the layout. ex.
<%= yield :js %>
Add the block (to be yielded) to your view. ex:
<%= content_for :js do %>
<%= javascript_include_tag "my_script" %>
<% end %>
If you are using the asset pipeline in production and you want to reference a particular asset like a "my_script.js", in your production.rb or relevant environment config.you will need to precompile it using:
config.assets.precompile=["my_script.js"]
In application.html.erb, use this to add controller specific javascript instead of application specific javascript. Make sure you remove require_tree.
<%= javascript_include_tag params[:controller] %>
Read more on this topic on Rails Guide.
So I want to avoid processing JavaScript files with ERB just so I can get a proper asset path to, say, an image.
Currently, this seems like the popular approach:
var myImage = "<%= asset_path('my_image') %>";
Which, of course, requires the filename be changed to "*.erb" so that it'll be processed.
I'd much rather isolate the ERB ugliness to one point in my project making a single manifest file (say, "assets.js.erb") that computes and makes available all the asset paths my JavaScript needs.
I can certainly do it WETly by tackling it case-by-case:
ASSETS =
"my_image": "<%= asset_path('my_image') %>"
window.assetPath = (path) -> ASSETS[path]
But, I'd really rather just write some ERB to recurse through all of my asset_paths.asset_environment.paths and build a big object literal manifest for me, so that my real application JavaScript can confidently call:
var myImage = assetPath('my_image');
Any ideas on (1) if there's an easier way to do this that I missed, or (2) how I'd accomplish a search of all the potential valid arguments to asset_path?.
An easier way :
Get the assets prefix in your .js.erb : <%= Rails.configuration.assets.prefix %>. If an absolute path is needed, you can also get the application URL (it's more complicated to get it from rails, so you can just hardcode it in your .js.erb ?)
If you are working with precompiled assets, get the fingerprint of your file which is stored in manifest.yml (at <%= Rails.configuration.assets.manifest %>). The manifest contains a list with all your assets and their respective fingerprints (documentation)
Make assetPath just prepending the application URL + prefix to your image name or fingerprint
An inconvenient is that you have to specify the full image name (included the extension).
Old question, but there is nice way to accomplish this. Just to explain the context of my solution: I need to display markers in a map, which have different possible icons based on the JS dynamic variables. Strangely, using the <%= asset_path('" + somefunction(raw_value) + "') %> was not working. Then, I've looked for the solution bellow.
Concretely, the solution I am using has only one js.erb file which stores the values of the images, and their fingerprinted names, which can be get by a function, image_path. After that, all my other JS files can be free of the asset_path and, consequently, of the .erb
Create a file images.js.erb in your_application/app/assets/javascripts with the following content:
<%
imgs = {}
Dir.chdir("#{Rails.root}/app/assets/images/") do
imgs = Dir["**"].inject({}) {|h,f| h.merge! f => image_path(f)}
end
%>
window.image_path = function(name) {
return <%= imgs.to_json %>[name];
};
Require this file in your application.js, which is normally in the same directory as above:
//= require ...
//= require ...
//= require images
//= require_tree .
Then, inside the JS that you've been using <%= asset_path('image.png') %>, you will use instead image_path('image.png');
Credits to this blog post for posting a Coffee script version from which I've based mine.
It depends on the context of where this image is used.
Use Case 1: The image is decorative and needs to be dynamically swapped.
Example: Spinner, while data is loading.
In this case, I refer to is in my sass and java script.
.spinner
background-image: url(image_path("spinner.png"))
Then I would operate with classes in java script and not images.
$.addClass('spinner')
Use Case 2: Image is part of an object.
There are many situations, when an image actually belongs to a object. In this case, I create a json file, which stores the data and the image reference like this. Then I use erb to unwrap the image reference - my_object.json.erb:
{
"icon" : "<%=image_path("icons/my_icon.png")%>",
"label":"My label",
"description":"My description"
}
Use case 2 requires more work on javascript side to load the json files, but it opens very powerful extensibility options.
Asset pipeline handles both cases famously.
On a few occasions now when I've moved from development to staging, I've been bitten by how JavaScript and stylesheets change their behaviour when rolled up into a single file.
For example, I'm trying to keep the series of stylesheets modular and small for maintainability, like so:
<%= stylesheet_link_tag "reset-fonts-grid.css", "typography.css", "layout.css", "cms.css", "cms.about.css", "cms.legal.css", "comments.css", "user_generated_content.css", "overlay.css", "login_page.css", "flag_for_admin.css", 'patch.css', 'nag_guide.css', :cache => "cache/all" %>
The works fine in development, when you're more concerned with debugging than counting http requests.
But as soon as I move to a production environment or set caching to be on in config/environments/development.rb like below, the layouts break:
config.action_controller.perform_caching = false
What's going on here, and why would a concatenated file behave differently to series of smaller requests like this, and how can I fix this?
As an aside, how much of a difference does the number of http requests actually make on page, compared to file size?
Does your CSS validate? I have had problems in the past similar to yours which were caused by small errors that I found with validation.
Try http://jigsaw.w3.org/css-validator/
Out of interest, does it work if you change your :cache option so that it doesn't include a forward slash? For example:
<%= stylesheet_link_tag "reset-fonts-grid.css", ..., :cache => "foo" %>
What does the HTML link element look like that Rails is generating for your combined stylesheet?
If you want to dig into the details of how the styles are being applied in the concatenated vs. the non-concatenated situation, you can install the FireBug plugin for Firefox. Then maybe open up two browser windows, one with the page in dev and one in production and use FireBug to isolate one DOM element that's giving you trouble and compare the calculated CSS attributes for that element in the two different situations.
The latest version of Safari has a built-in tool that is very similar to FireBug.
Is it possible that Rails is concatenating the CSS files in an incorrect order? Seems unlikely, but perhaps there's a bug in Rails. Take a look at the concatenated file and check the order. If they're out of order, you could create one master CSS file and include the others with #include statements. That would ensure that they're read in the correct order.