I'm working on integrating a javascript library into the rails asset pipe line.
The javascript expects a fonts/ and images/ folder to be available at the root level, but I think Rails is precompiling these to assets/fonts/ and assets/images.
The reason I think this is the case is because if I put the fonts and images folder directly into the public folder everything works.
But if I place fonts and images in the apps/assets/fonts and apps/assets/images the javascript returns 404 errors for the requested fonts and images.
Is there somewhere in Rails config that I can tell Rails to precompile these fonts and images folders to public/ instead of public/assets/?
You should use the asset pipeline helpers in your case, especially because of the fingerprinting strings that will be appended to the name of the assets.
to do that:
1.change the references to the font/image files to
using the asset helper
<%= asset_path 'fontFileNameAndExtension' %>
using asset image helper
<%= image_path 'imageFileNameAndExtension' %>
2.change the extension of your .js file to .js.erb
3.include the name of your js file into application.js as
//= require YourJsFileName
4.execute the pre-compile again, and you might want to clean the compiled assets first:
rake assets:clobber
rake assets:precompile
Related
The image(s) is located in assets/images/new_design/new_img1.png.
In the new_layout.css.scss file, I have the following line:
.top_bg {
background-image: url("/assets/new_design/new_img1.png");
...
}
But the image is not rendered. I've tried also:
background-image: image-url("/assets/new_design/new_img1.png");
background-image: url("/assets/new_design/new_img1.png");
background-image: url("new_design/new_img1.png");
But none of these worked. On localhost I am able to render it successfully with the third approach, but I don't know how to do it on the production server.
Any help appreciated, thank you!
Images placed inside of the /assets/ folder are brought into Rails using the asset pipeline. So, if you want to access them you'll need to append .erb to your file so you can put some ruby in to your css file that'll be evaluated by rails.
Change new_layout.css.scss to new_layout.css.scss.erb
Now that you've got a file that can run helpers, use the image helper to generate the path for your image:
background-image: url(<%= asset_path 'new_design/new_img1.png' %>);
Should work. This utilizes an asset path helper, that looks through your asset folder for the appropriate resource and created a direct link.
If you're looking to directly access images without the pipeline, you can place them in the public folder of your application, but then you lose the value of using the asset pipeline.
As an addition, for production... You may need to precompile your assets before pushing to production if your process doesn't include this step in the launch.
Run the following to precompile your assets:
rake assets:precompile
I've had the same problem before, and have been able to get away with having my image in my
app/assets/images
directory and be able to call the image using
background-image: image-url("project-image.jpg");
Btw. In production mode, assets are by default precompiled by the Asset Pipeline. All files included in application.js and application.css asset manifest are compressed and concatenated into their respective files of the same name, located in the public/assets folder.
Also, to include additional assets, you may specify them using the config.assets.precompile configuration setting.
```config.assets.precompile += %w( some-name.css )
The title pretty much says it all...
I tried adding /app/assets/fonts/font.woff and referencing it from my css file with /app/assets/fonts/font.woff but it doesn't seem to work.
Any ideas?
It turns out that the asset pipeline that #JimLim mentioned works a bit differently in Rails 4. Full docs here, but here's the relevant excerpt:
2 How to Use the Asset Pipeline
In previous versions of Rails, all
assets were located in subdirectories of public such as images,
javascripts and stylesheets. With the asset pipeline, the preferred
location for these assets is now the app/assets directory. Files in
this directory are served by the Sprockets middleware.
Assets can still be placed in the public hierarchy. Any assets under
public will be served as static files by the application or web
server. You should use app/assets for files that must undergo some
pre-processing before they are served.
In production, Rails precompiles these files to public/assets by
default. The precompiled copies are then served as static assets by
the web server. The files in app/assets are never served directly in
production.
So I ended up moving my /fonts directory into /public adjusting my paths in the #font-face declaration accordingly and everything works fine.
You have to tell Rails to include your fonts directory in the asset pipeline, as follows:
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Finally, let Rails figure out the correct path for you, so you don't have to mess with the prefix app, app/assets etc. Add a .erb extension to your css/scss file e.g. application.css.erb, and use embedded ruby:
src: url("<%= asset_path('fonts.woff') %>");
(Related question)
Could I run rake assets:precompile for specific JavaScript file?
Otherwise the full precompile lasts for 5 minutes and makes quick changes in JavaScript files very annoying.
If you wanted to precompile just one file, you could make a custom rake task to do so fairly easy.
namespace :assets do
desc "compile one js file"
task :compile_one_file => :environment do
dest = "#{Rails.root}/vendor/assets/javascripts/compiled/"
js_asset = "your_jsfile.js"
File.write(dest + js_asset, Uglifier.compile(Rails.application.assets.find_asset(js_asset).to_s))
end
end
then from the command line
rake assets:compile_one_file
Hope this helps, I find this useful for vendor js files that I don't change often such as jquery and jquery plugins. That way when im in development it speeds up my page loads keeping the asset pipeline from having to route all the separate requests for my vendor files. It just serves up one minified js file of all my vendor js.
Short: You can't.
During precompilation Rails goes through the Application.js file and merges all imports into one so just changing one file is simply not possible due to the compression that goes on in there. (It doesn't do anything to files not referenced from application.js)
Next up: You should not have to run rake assets:precompile during development when doing quick fixes. Only on deployment where (depending on your patience) it should be no problem having the task run 5 minutes.
You should be using the development environment during development where asset precompilation is not necessary because Rails will serve the assets unmerged and un-minified.
If you are running the Rails build in web-server through rails s this should be by default, but you can explicitly start the rails server using:
rails s RAILS_ENV=development
If the assets are still not correctly displayed or you see errors make sure you have config.assets.debug = true
#Tigraine is partially correct. Rails 3.1+ assets are intended to be fully managed by Rails and by default all assets will be compiled down to one js and one css asset.
HOWEVER...
Compiling down to a single asset relies on the use of an asset manifest (application.js and application.css) that is processed by the Sprockets gem. By default these manifests include a require_tree directive and it's that directive that includes all the files. If you remove that directive, you've got to do a bit more work to get your assets compiled.
If you want to build separate assets you can set a config option in application.rb.
config.assets.precompile += %w( additional/asset.css funky/stuff.js )
The above line would add the files additional/asset.css and funky/stuff.js to the list of files that would be produced when the assets are precompiled (Note that the '+=' is being used to extend the default list). To be as explicit as possible this means that you would have four assets precompiled: application.js, funky/stuff.js, application.css, and additional/asset.css.
That said, you might want to check out the guard-rails-assets gem. The gem is flexible in the way it supports precompiling; precompiling only changed assets is possible. I've heard some good feedback about it but not used it myself.
#Tigraine isn't correct.
It's possible, you just have to create folders and put the css files in them and import it to different files in the assets folder.
Like
application.css
*= require_self
*= require foundation_and_overrides
*= require reset
*= require_tree ./screen
Where Screen is a folder I've placed inside the stylesheet folder. like assets/stylesheets/screen/. I call the application.css with
<%= stylesheet_link_tag "application", media: "screen, projection" %>
Now, if you want to create a single css file for another layout you create that under assets/stylesheets
Like xxx.css
If you need multiple files for xxx you follow the same steps as above but the important part here is that you add this line to
production.rb
config.assets.precompile += %w( xxx.css )
Then inside the layout you add:
<%= stylesheet_link_tag "xxx", media: "screen, projection" %>
You can do this completely without Rails. This can make things run faster depending on your environment.
quick_compile.rb
require 'sprockets'
sprocket = Sprockets::Environment.new
sprocket.js_compressor = :uglifier # or read off config yml
sprocket.append_path('app/assets/javascripts') # the directory that holds you js src.
file = File.new('test_min.js','w+') # the output file path.
file.puts(sprocket.find_asset('test.js')) # the file to complie
file.close
If you just want to evalute the //= require statement, you can remove the js_compressor setting. Sprocket will concatenate the files required.
I have a JS file defined in the app - app/assets/javascripts/client/some-client.js.coffee
In my dev env I can access this file via URL - /assets/client/some-client.js
But I cannot do the same in production? ...meaning the URL does not work, what could be wrong?
In prod, you will have access only to precompiled files, if you use the default configuration.
You can define which assets to precompile in config/environments/production.rb:
config.assets.precompile += %w( some-client.js blabla.js some-client.css ) #etc...
Run rake assets:precompile to... precompile your assets.
Learn more with this guide: http://guides.rubyonrails.org/asset_pipeline.html
If you didn't find it yet, be sure that you are accessing it through <%= javascript_include_tag "some-client" %>. As the asset pipeline handles finding where it has precompiled the asset. Along with the config.assets.precomile += %( some-client.js ). Also, if the helper function can't find that in production you might want to try moving client/ to assets/javascript/client I think it looks for assets for example javascripts files in app/assets/javascripts/ lib/assets/javascripts/ and vendor/assets/javascripts/ if I understand the asset pipeline. And it looks like you don't have it in any of those files, so it may be skipping it since it doesn't see it.
EDIT:
Looks like you have it in javascripts/ sorry. The asset pipeline should traverse subdirectories.
I have a bunch of static assets ( not jpg, css, & js) - rather files like pdf forms, xls that I need to serve to users. They rarely change. Before I used to store them in public folder, but with the introduction of the assets pipeline in rails 3.1 what is the best place to store files like that now now?
Actually I just tested it by creating a folder in app/assets/files and sticking my xls files in there, and rake assets:precompile task just picked it up.
Also this needs to be added for Rails < 3.1:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/files"
The best place for items like this is still in the /public directory, remember to have your web server serve these assets directly also.
The assets directory is only needed if you want to take advantage of the asset pipeline. The asset pipeline handles things from compressing and compiling .coffee and .less or sass files to compressing your js and css into one file so your webserver only has to serve one file for each.
When you compile your assets with the rake task bundle exec rake assets:precompile they are moved to your public directory anyhow.