I am using rails 3.2.12 and created a css file in assets/stylesheets/equipment.css to go along with a controller called equipment_controller.rb. This stylesheet isn't working. What do I need to do to get this included in the pipeline?
The file needs to be loaded into your application.css.
In your application.css file, you will either need to load the file manually (by adding require equipment to the manifest at the top of the file), or it will also be included if you have a require_tree line.
See http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives for more information.
Make sure you have the *= require_tree . in your application.css. It will be responsible to include all stylesheets from the current directory.
I cleared the contents and changed the extension from .css to .css.scss. And now it works.
Related
I am new to rails and I'm a bit confused about how assets are loaded. I can get things working but I would like to understand what really happens behind the scenes.
I have been reading the documentation but there are things that I don't understand completely.
MANIFEST FILE
First thing that confuses me is the usage of manifest files.
For instance if in my app/assets/javascripts/application.js file I have:
//= require_tree .
Rails documentation says:
tells Sprockets to recursively include all JavaScript files in the
specified directory into the output
What isn't clear to me is which directory? app/assets/javascripts/?
Does that mean that if I add a file in app/assets/javascripts/ it will be loaded and served?
If I add a gem that requires to add a file example.js I need to add to the manifest file:
//= require example.js
But why is this necessary if //= require_tree already loads and serve files in app/assets/javascripts/ which is the location where I have put my example.js? Ok that allows me to specify the order if later I add more requires. But other than that?
HTML FILE
And then the script to be included in application.html.erb
<%= javascript_include_tag ('application'), 'data-turbolinks-track' => true %>
I understand this loads the application.js file mentioned above and therefore the various //= require in it.
Sometimes happens that is required to script the particular file as:
<script src="js/example.js"></script>
Is this scenario wouldn't be <script src="js/example.js"></script> doing the exact same thing of //= require example.js?
PUBLIC VS APP ASSETS
I understand that if I place my example.js file on public/assets folder it won't be compiled but served separately. Why would I do that? Is it reasonable to do it in case a file is not served correctly when concatenated and compiled and works only if served separated? In other words, if I include a .js file on app/assest and it has problems to load or break things, is it worth to try to remove it from there and move it to public/assets or does this just not make sense?
APP ASSETS VS VENDOR ASSETS
On which scenario should I add a file to vendor assets instead of app assets? What is the difference between adding it to a place or another?
And in my vendor/assets/javascripts I have only an empty .keep file. So there'n so such thing as manifest file on app/assets. How are files in this folder referenced then?
For directives that take a path argument, you may specify either a
logical path or a relative path. Relative paths begin with ./ and
reference files relative to the location of the current file.
So //= require_tree . tells sprockets to load any files in app/assets/javascripts/ and concatenate them into application.js.
Is this scenario wouldn't be <script src="js/example.js"></script>
doing the exact same thing of //= require example.js?
No. Rails serves the assets as seperate files in development so that you get a meaningful line number and file reference when errors occur.
In production it concatenates and minifies the assets which is important for performance.
Sprockets does not check your views / layouts for script tags. So the the former would result in two requests.
I understand that if I place my example.js file on public/assets
folder it won't be compiled but served separately. Why would I do
that?
The public directory is placed under the servers web root. Since the files there are served without much intervention its a good place for things like error pages or where you need assets that have a static name without a cache busting fingerprint.
On which scenario should I add a file to vendor assets instead of app
assets? What is the difference between adding it to a place or
another?
/vendor/assets is the place to put assets that are not created by you or which are not part of the application. Both are added to the sprockets load paths so the results are identical. Its rather just a question of code organisation.
https://github.com/rails/sprockets
http://guides.rubyonrails.org/asset_pipeline.html
I have a plugin with many types of files, and its own tree structure (html, css, js, documentation, images, etc)
Rather than going through the plugin folder, and splitting all the css and js files into the vendor/assets/js/ vendor/assets/css/ folders, I want to just keep the entire plugin folder as is. For example,
vendor/assets/multipurpose_bookshelf_slider/
How do I make sure the paths load properly, and reference them in my manifest files?
Currently, I have some files place as follows (not exhaustive)
/my_app/vendor/assets/multipurpose_bookshelf_slider/css/skin01.css
/my_app/vendor/assets/multipurpose_bookshelf_slider/js/jquery.easing.1.3.js
/my_app/vendor/assets/multipurpose_bookshelf_slider/
/my_app/vendor/assets/multipurpose_bookshelf_slider/
I'm referencing them in
application.js
//= require multipurpose_bookshelf_slider/js/jquery.easing.1.3.js
//= require multipurpose_bookshelf_slider/js/jquery.bookshelfslider.min.js
application.css.scss
#import "css/bookshelf_slider";
#import "css/skin01";
Any folder created directly under assets will be added to the load paths. Files in that folder can be referenced as usual like so:
If you have
vendor/assets/custom/js/file.js
vendor/assets/custom/css/file.css
then vendor/assets/custom/ will be added to the load paths.
Include your files in the following files by doing the following:
application.js
//= require js/file
application.css.scss
#import "css/file";
Once that's done, make sure to restart your local server, since it is upon starting your server that the load paths get recognized.
Note: to see a list of load paths, type in your terminal rails c, then type Rails.application.config.assets.paths.
If the application you're running has the assets-pipeline activated, it should find your assets after expanding the path in your application.rb
config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider")
I prefer D7na's answer but with a bit of improvement in my opinion.
As long as this is related to assets, I think it is better to be placed in the assets.rb file.
assets.rb:
Rails.application.config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider")
I have read the documentation of Grails asset pipeline plugin so I started implementing it in a sample grails project built in 2.2.3. I installed the asset pipeline plugin version 1.7.1. My requirement is to include jquery.ui.min.js in my gsp file so I included by using the tag
<asset:javascript src="jquery-ui.min.js"/>.
Also, in my Config.groovy, I have made the following entry
grails.assets.bundle=true.
The problem which I am facing is that I'm unable to access the jquery.ui.min.js in my gsp file. Pease tell me what am I missing and how should I proceed with it as I could not get any valid solutions for my query??
I think you need to reference a different file:
<asset:javascript src="application.js"/>
And application.js contains:
//= require jquery-ui.min
at the top of the file (make sure there isn't any blank lines above that line, other comment lines are ok) to load your lib. See http://bertramdev.github.io/asset-pipeline/guide/usage.html#directives
This answer is a guess based on what Grails 2.4 gives me out of the box. FYI, the auto-generated application.js contains:
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//
//= require jquery
//= require_tree .
//= require_self
I know that for every controller, there's a separate SASS and CoffeeScript file to keep things organized. But what about styling the application layout itself? How is it that there's no files to put all the styling and JS related to the whole layout?
I know there's application.css and application.js, but I Know these are not to be messed with because these files put everything together.
I hope someone could put me in the right track!
the application.css and application.js are manifest file and there you can see require_tree . that load all your js file for application.js and in same manner for application.css now on compiling assets pipeline make a minified version of that and create only one file that hold all the js in itself if you want to create two manifest file you can also do that .
Is it possible, using the asset pipeline on production, to seperate the minifcaiton & concatenation of js & css?
I want to have my css pre-compiled, but I'd like to leave my js files as they are in development.
In your application.js file you can remove the line:
//= require_tree .
Which causes the asset pipeline to ignore your individual javascript files for concentration.
You can manually add any file you wish to be included in the application.js file instead.