Rails 3.1 strategy for pre-compiling controller specific JS assets - ruby-on-rails

In order to keep controller specific JavaScript logic out of the standard application.js and only have it included by the relevant controller, I'm putting it in its own .js file and including it based on the controller name from the layout like such:
<%= javascript_include_tag "application", params[:controller] %>
That works just fine, but when I deploy the app to production (I'm using Capistrano and have a pre-compile task set up), the asset pipeline doesn't precompile any of the controller specific JS files. I presume this is because my actual JavaScript file isn't referenced by require directives in application.js.
How do I deal with this without moving my controller specific JS back to application.js, or explicitly referencing it from application.js?
Is there some way to tell the asset pipeline to pre-compile an additional list files? How could I manually pre-compile a specific file on production?
Update
As it turns out, you can specify individual files here in your config/environments/production.rb:
config.assets.precompile += %w( achievements.js )
...or I just went ahead and capriciously added it for every JavaScript file:
config.assets.precompile += %w( *.js )

If you want to precompile the js|css only found in the root of assets/javascripts and assets/stylesheets directories (and not their tree hierarchy), you can put this in environment files :
Dir.chdir "#{Rails.root}/app/assets/javascripts"
a = Dir.glob("*.{js,coffee,erb}")
Dir.chdir "#{Rails.root}/app/assets/stylesheets"
b = Dir.glob("*.{css,erb}")
config.assets.precompile += a.concat(b)
Dir.chdir Rails.root

I think you and james_schorr are not really talking about the same thing.
You need to add the files other than application.js to config.assets.precompile. His answer was more about the directory structure you could/should adopt, if I'm not mistaken.
If I wanted to have controller specific, I would do:
/assets
/javascripts
/users
login.js
profile.js
/blogs
/posts
users.js
blogs.js
posts.js
And for instance, users.js would be:
*= require_tree ./users
That way, you can stay organized (have a lot of js files per controller), but in prod, they will all be included in one file.
Still need that in your config:
config.assets.precompile += %w( *.js )

This is what I do:
directory structure:
app/assets/javascripts/sessions/multiple.js
app/assets/application-sessions.js
application-sessions.js just has:
*= require_self
*= require_tree ./sessions
Then in your view, do
<% if #current_controller == 'whatever' %>
<%= javascript_include_tag "application-sessions" %>
<% else %>
….
<% end %>
FYI, #current_controller = controller_name in my application_controller.rb methods, called with a before_filter.

I am having same issue here, it's an headache to me.
Including *.js is a little too much, I don't want every files to be compiled into separated files, some of them suppose to be merged together.
My idea is, store the controller specific files into a sub directory, such as "controllers", and then only include controllers/*.js or css files for precompile.
Not sure if it work or not, I will try it out, anyway, it might be a useful hint.

Related

How can I have assets compiled into image, stylesheet, and javascript directories?

The asset pipeline puts everything into the same directory. Images, stylesheets, and javascripts all go into /public/assets (although subdirectories are respected).
Is there a way to have them copied into /public/assets/images, public/assets/stylesheets, and public/assets/javascripts?
Adding to the confusion is this line in the rails guide:
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
In regular views you can access images in the public/assets/images directory like this:
But rails doesn't use or make a public/assets/images directory.
Solution #1:
Create a new subdirectory within the app/assets/ like all and move the
current asset directories into that the new folder; e.g.
mkdir -p app/assets/all
mv app/assets/{javascripts,images,stylesheets} app/assets/all/
Then when precompiling assets with RAILS_ENV=production rails assets:precompile
it should create those javascripts, images and stylesheets directories
underneath the public/assets directory;
public/assets/javascripts
public/assets/images
public/assets/stylesheets
Solution #2:
You can create a new directory somewhere else in your project; like assets,
instead of app/assets; and add that the new directory to the current Rails
asset paths configuration within the assets.rb initializer
# app/config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.application.root.join("assets")
Then precompiling assets should have the same effect as Solution #1.
Solution #3
So, as part of the Sprocket-Rails Engine it preloads the app/assets
subdirectories with this following block of code:
# ~/ruby/gems/2.3.0/gems/sprockets-rails-3.2.0/lib/sprockets/railtie.rb:54
module Rails
# [...]
class Engine < Railtie
# Skip defining append_assets_path on Rails <= 4.2
unless initializers.find { |init| init.name == :append_assets_path }
initializer :append_assets_path, :group => :all do |app|
app.config.assets.paths.unshift(*paths["vendor/assets"].existent_directories)
app.config.assets.paths.unshift(*paths["lib/assets"].existent_directories)
app.config.assets.paths.unshift(*paths["app/assets"].existent_directories)
end
end
end
end
The line of interest is the
app.config.assets.paths.unshift(*paths["app/assets"].existent_directories)
It call to existent_directories off the *paths["app/assets"] is returning
all the subdirectories within the assets folder, hence why there are no
subdirectories in the public/assets folder when Sprocket computes its digested
assets.
In order to add those sub-directories back in, we have to modify the current
Rails configured environment for Sprockets; i.e.
Rails.application.config.configure. However, the Sprockets::Paths that is
included in the Sprockets::Configuration that
Rails.application.config.configure yields to does not allow public access to
its internal #paths variable, nor does it have an method to remove paths like
it does to add paths via its append_paths. Instead we have to duplicate the
current paths already included by the above Railtie initializer block, remove
the old "app/assets" subdirectories paths that we do not want, add in just the
"app/assets" directory we do want and then append them back into the configured
Sprockets environment; which looks something like this in a Rails initializer:
# app/config/initializers/assets.rb
Rails.application.config.assets.configure do |env|
old_paths = env.paths.dup
new_paths = old_paths - Rails.application.paths["app/assets"].existent_directories
new_paths << Rails.application.root.join("app", "assets")
env.clear_paths
new_paths.each { |path| env.append_path(path) }
end
Closing Comments
Using any of these solution should also mean that you will need to specify the subdirectory in all your
asset_path method calls within your view templates in order to find the
compiled asset; e.g.
<%= asset_path "images/example.png" %>
<%= asset_path "javascripts/application.js" %>
<%= asset_path "stylesheets/application.css" %>
/assets/images/example-ca63e56ac855bdfb187479a35a7476cd65c539727f84fea19e1ad258cf3d23f5.png
/assets/javascripts/application-a4f3e75c7f7aa6d6cbc2ebcbb436b12aca442553219883805baebdd2eecd5471.js
/assets/stylesheets/application-539757f75200b6ea43399bf5e25cbc2819c1e6a610f94d5c9beaf91fec89384e.css
I hope one these solutions help.

How do I add js within another directory in my assets/javascripts/ to the assets.precompile?

In one of my views, I have this:
<%= javascript_include_tag "piggybak_variants/piggybak_variants" %>
Which includes a piggybak_variants.js file.
I tried this in my production.rb
config.assets.precompile += %w(piggybak_variants.js)
But I am still getting an error in Heroku about that file not being pre-compiled.
How do I fix that, other than doing *.js? That seems like using a sledge hammer.
Your include path is missing the parent directory. This should work:
config.assets.precompile += %w(piggybak_variants/piggybak_variants.js)

Rails is giving me a file.js isn't precompiled error after deploying with capistrano

I'm using a simple include directly in an erb :
<%= javascript_include_tag "file.js" %>
I simply took code which was in one of my documents inside script tags and moved it out into this file and placed it in app/assets/javascripts/file.js. Do I have to list this file somewhere? I do not want it included on every page, just certain pages.
In config/environments/production.rb:
config.assets.precompile += %w( file.js )
Or
config.assets.compile = true
Also make sure you got this in your capistrano recipe"
load 'deploy/assets'

How do I prevent an asset from being cached by the Rails Asset Pipeline in development mode?

I added a custom engine for HAML in config/initializers.
When I visit http://127.0.0.1:3000/assets/page.html it renders the page successfully.
# page.html.haml
!!! 5
%html{:lang => "en"}
%head
= stylesheet_link_tag 'application'
= javascript_include_tag 'application'
The problem is Rails seems to cache the html asset. When I add or remove a file from the application.js manifest it doesn't update until I stop the Rails server and run rake tmp:clear. An alternative is to touch the application.js file. I have config.assets.debug = true set because I prefer to see individual files/folders in Chrome DevTools rather than one big application.js file.
Is there a way to exclude certain assets from being cached during development.
Just to reiterate - its the HTML being cached which is the problem, changes to the manifest are reflected when visiting http://127.0.0.1:3000/assets/application.js.
A brute force solution would be to add some depends_on attributes to the haml file:
# page.html.haml
#= depend_on application.js
#= depend_on application.css
!!! 5
%html{:lang => "en"}
%head
= stylesheet_link_tag 'application'
= javascript_include_tag 'application'
This should force the asset to be regenerated when the application.js file is changed.
There are a few cavets with this. The file names should be the names in the source tree. It assumes you can use # for comments in your HAML renderer (I don't know HAML so I'm not sure).I'm also not really sure how this works with a custom engine. Also, a better solution would be to have your custom HAML engine track dependencies itself, but I don't know how to do this.
See the sprockets docs for more details

Asset Pipeline Cacheing CSS?

I am working on a Rails 3.1 app. I have created an application.css.scss.erb file. The .erb is in the end because I want to load a variable from the config file as the color variable in the css:
$highlight1: #<%= COLOR.highlight1 %>;
$highlight2: #<%= COLOR.highlight2 %>;
Everything works fine, but the problem I am having is that whenever I change a value inside COLOR.highlight1, it doesn't reflect the change until I go in to my css file and change something (i usually add some spaces and save it). Thats when I see the change. Clearly rails is looking to see if the file was changed in order to update the change.
Is there any way that at least during development, this can be turned off and I can see the changes without having to also modify the css file?
Any critique/opinions on my technique are also welcome
The Sprockets depend_on directive is used to declare these kinds of dependencies. So at the top of your css.scss.erb file, with the other directives (require and friends), put something like:
//= depend_on "/path/to/colors.rb"
Then when the file /path/to/colors.rb changes, it will force the css to update too.
Unfortunately, I have never gotten this to work with a relative path to a file outside of one of the asset directories (javascripts/stylesheets/images) so there may be something in the way Sprockets resolves paths that prevents this, or else I'm missing something. That leaves you with the options of specifying an absolute path, which will almost certainly not work in across all your app environments, or putting the constants file into your asset directories (app/assets/stylesheets/colors.rb, for example).
For reference, here's the doc for the depend_on directive from the Sprockets (2.0.3) source, in sprockets/directive_processor.rb
# Allows you to state a dependency on a file without
# including it.
#
# This is used for caching purposes. Any changes made to
# the dependency file will invalidate the cache of the
# source file.
#
# This is useful if you are using ERB and File.read to pull
# in contents from another file.
#
# //= depend_on "foo.png"
#
If anyone does know a way to specify relative paths to other places like config/initializers or something, please let me know!
In addition to David Faber's answer. I needed to use relative paths too.
I wanted to generate a js file with the locale dictionary, which would update if the locale files were changed:
//= depend_on "../../../config/locales/en.yml"
//= depend_on "../../../config/locales/ja.yml"
var locales = <%= locales.to_json %>;
Turns out that currently (Rails 3.2.3) relative paths only work if the relative path is also in the assets path!
So the ugly solution is to add the path in config/application.rb:
config.assets.paths.unshift Rails.root.join("config", "locales").to_s
http://guides.rubyonrails.org/configuring.html
config.assets.compile is a boolean that can be used to turn on live Sprockets compilation in production.
might want to try that, I'm not sure if its getting compiled real time though, at least it should disable the caching.
maybe try:
config.assets.digest = true
in your development config file
I try this, it work
in application.rb
config.autoload_paths += %W(#{config.root}/lib/assets_variables)
config.assets.paths << File.join(Rails.root, 'lib', 'assets_variables')
in lib/assets_variables/color.rb
module Color
def self.default
'blue'
end
end
in app/assets/stylesheets/color.css.scss.erb
//= depend_on "color.rb"
$default_color: <%= Color::default %>;
.content {
color: $default_color;
}

Resources