At the moment my application.js file looks like this:
//= require_tree ./vendor
//= require_directory ./lib
I also have individual JavaScript files for individual views, e.g. home.js, user.js etc.
Do people put these files in the application.js? If so how do they activate them? Most of my JavaScript is executed from the jQuery ready event handler $(function (){ });
Obviously this does not work if they are all in the same file. How could I minify these files and access the correct ready event if they are all in the same file?
Any help or tips greatly appreciated.
It's fine to have multiple jQuery document ready handlers as you shouldn't care about the order between them. You'll need to check that the elements they work on exist before trying to attach any handlers, though.
For example, in home.js, you might have something like
if ($("#home_div").length) { // do some stuff on the home page }
Doing this is better than splitting up your JS and only serving some pieces on some pages, since with the compiled approach your users only have to download JS once. I think the default rails 3.1 config should minify and concatenate all of your JS in production but not in dev. If you want to enable it manually,
config.assets.compress = true # compress js into one file
config.assets.js_compressor = :uglifier # minify the JS (need the uglifier gem)
config.assets.digest = true # append hashes to filenames so you can set far-expiry headers for caching
some more info, check out the "customizing the pipeline section" of the docs http://guides.rubyonrails.org/asset_pipeline.html#customizing-the-pipeline
and this related question
How to properly work with jQuery in Rails 3.1 asset pipeline?
Related
I have installed livereload gem, which I'm using with a ruby middleman application. However, it's only autoloading changes to the css. If I make changes to the html files, I still have to restart the server to view the changes. Is there somehow I can make it autoload html changes?
It seems that this feature doesn't work on all versions of livereload and also depends on the browser and it's extensions. Try to also change a css file when you change the html so that the refresh occurs. Also, have you looked at https://github.com/guard/guard-livereload ? That has an example watching the change of html.
guard 'livereload' do
watch(%r{app/views/.+\.(erb|haml|slim)})
watch(%r{app/helpers/.+\.rb})
watch(%r{public/.+\.(css|js|html)})
watch(%r{config/locales/.+\.yml})
# Rails Assets Pipeline
watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html))).*}) { |m| "/assets/#{m[3]}" }
end
This is problem, I'm using Typus, which includes a fancybox jquery plugin under /vendor/assets. That fancybox version is too old (1.3.4) and it does not work with rails 1.9.x so I need to replace that with fancybox 2.x that works with that version of jquery because the rest of my site uses jquery 1.9.
Typus's application.js manifest loads fancybox this way
//= require jquery.fancybox-1.3.4.pack
so I thought I could just add fancybox 2 with that file name and the asset pipeline would use that version instead but it's not, it's loading the file inside /vendor/assets.
So, my question is, how does rails handle that case when there's more than one file with the same name? is there any priority? and most important, can I change that so the files under /app/assets have more priority?
I've read it uses the first file it finds with the name but I don't know how to tell rails to look in some folder first.
I've tried
config.assets.paths = [Rails.root.join('app','assets')]
or
config.assets.paths = [Rails.root.join('app','assets'),Rails.root.join('vendor','assets')]
on my config/application.rb but it keeps using the file under /vendor/assets
I don't want to fork>modify Typus, I want to tell rails to use my jquery.fancybox-1.3.4.pack.js version of the file
I've seen on github that the last commit on Typus downgrades jquery to 1.8.x but I can't do that, I need jquery 1.9.
I'm also trying to override Typus's application.js inside my project but with no luck.
I'm developing a rails app which handles a public area (as of today, static pages), and a private space with authentification, etc. Both of those were developed independently. The first has hand-made style, the latter uses twitter bootstrap.
In production, rails compile my assets into one file, and some styles are conflicting, resulting in the public area having some elements of Twitter Bootstrap... Not what I want.
Is there a way to configure the asset pipeline so when it compiles, there is two output ? the classic application.css, and the front.css?
Yes, there is. You need to have two manifest files. I would call the public one application.css and the private one admin.css as this is a common Rails convention.
The application.css should require all the public CSS files, and you will need to remove the require_tree directive as this is what is including things you don't want.
The second manifest file, admin.css, will include the things you want for the private side.
You can then reference these files in the layouts using the Rails helpers.
You will need to add the admin.css (and .js if there is one) to the precompile array for this to work correctly in production:
config.assets.precompile += ['admin.js', 'admin.css']
I have an action with
def new
#test_var = 'i want this to show'
end
All I want to do is inject that into the javascript called for that page. For example:
#app/assets/javascript/my_model.js.coffee.erb
$ ->
console.log('<%= #test_var %>')
I'm guessing this doesn't work because that the coffeescript/erb is compiled before the controller is accessed...so, if I wanted to inject controller variables into a JavaScript file (client side - NOT accessed via ajax) in 3.1, how should I go about doing it?
I believe the problem is that you're thinking about the asset pipeline all wrong...
asset being the operative word.
It's not a view pipeline. Other things which are assets? images & css files, things which can be preprocessed and then served as-is. The erb/preprocessing of your assets doesn't occur on each pageload/request, rather it occurs on startup/filechange so in production said assets can be optimised, cached and served statically.
You could probably figure out a way to achieve it using Live Compilation (see section 4.2 of http://guides.rubyonrails.org/asset_pipeline.html) but as the docs say:
This mode uses more memory and is lower performance than the default. It is not recommended.
The bad answer would be 'inject the javascript into your view', but decoupling your javascript from your rails controllers/views is a good idea.
A better answer would be to have an asset folder containing all of your controller javascripts, and use some "what page am I on?" javascript to determine whether to run the code or not.
Here's some answers that explain various approaches to this:
Rails 3.1 asset pipeline: how to load controller-specific scripts?
Using Rails 3.1, where do you put your "page specific" javascript code?
I've been reading this post about minifying and compressing static files like CSS/JS within the publish/package event in VS2010.
I wonder if it also is possible to combine the files to one CSS file and one JS file?
And how that can be done in this process.
As far as minifying and compressing your CSS and JS files - that shouldn't be any issue.
However - when it comes to actually combining all of your related files (CSS & JS) into single files, you will need to be careful to avoid any naming conflicts that can occur.
(This is especially important if you are using some already minified JS files - as variables like a,b,c etc. will be used often.)
The YUI Compresser can handle both the compression of CSS and JavaScript files.
Hope this helps.
Publish time merging is good idea but sometimes say page "A" needs 'a.js' and 'b.js' whereas page "B" needs 'a.js' and 'c.js' and there can many such dynamic combinations. Doing this check at build time and then grouping is sometimes very hectic.
What if grouping happens on the fly for required resources and with one HTTP request like this...
<script language="JavaScript" src="/appContext/js/a,./subdir/b.js"></script>
WebUtilities library (for J2EE) does exactly same and helps with many other front end optimizations.
Minimizing HTTP requests
Minifying JS,CSS files
Minifying inline JS, CSS snipped (custom tag)
Leveraging browser caching (Expires, Cache-Control)
Server side caching (until resource changes)
Early setting charset etc.
Here is the link. Have look in case you find it useful.
http://code.google.com/p/webutilities/