Asset Pipeline Cacheing CSS? - ruby-on-rails

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;
}

Related

How to add a rails asset dependency to an environment variable with sprockets?

I made the following js.erb:
#= require cable
this.App = {};
App.cable = Cable.createConsumer('<%= Rails.application.config.web_socket_server_url %>');
I would like sprockets to regenerate the asset when web_socket_server_url is updated.
I tried to use depend_on, but it only works for files. I also tried to add a config block in an initializer (which I expected reloading all assets when changed, instead of just the one concerned):
Sprockets.register_dependency_resolver 'web-socket-server-url' do
::Rails.application.config.web_socket_server_url
end
config.assets.configure do |env|
env.depend_on 'web-socket-server-url'
end
I got the idea after seeing this commit of sprocket-rails https://github.com/rails/sprockets-rails/commit/9a61447e1c34ed6d35c358935bcae4522b60b48d
But this did not work as I would have expected.
Ideally, I would have hoped to be able to register the dependency resolver in my initializer, and then adding //= depend_on 'web-socket-server-url' in my asset, so only the asset would be reloaded.
As a workaround, I might add the config in the HTML markup, and get in in the javascript without using ERB, but it does not feel as good.
How could I make this work with sprockets ?
The current API for that is the one that you already used.
Sprockets.register_dependency_resolver 'web-socket-server-url' do
::Rails.application.config.web_socket_server_url.to_s
end
config.assets.configure do |env|
env.depend_on 'web-socket-server-url'
end
That would invalidate all the cache when the config is changed an not the cache for that file as you pointed.

Generating list or paths of stylesheets and javascript files in Rails 4

I'm writing a Rails4 app that uses a custom cache manifest file which needs to include references to all the required Javascript and CSS files. Due to the nature of the application, the Rack Offline gem can't be used.
The stylesheet_link_tag and javascript_include_tag calls produce the correct list of files (as generated by the asset pipeline) but embed them in HTML tags.
Is there a way to get the paths to all the compiled javascript and stylesheet files in the controller?
eg.
/assets/custom.css?body=1
/assets/incidents.css?body=1
/assets/users.css?body=1
/assets/application.css?body=
/assets/jquery.js?body=1
/assets/bootstrap/affix.js?body=1
...
That one was fun! Had to go into the Sprockets source to figure it out.
asset_list = Rails.application.assets.each_logical_path(*Rails.application.config.assets).to_a
You can then go in a grep through the asset list, something like:
asset_list.grep(/\.(js|css)/)
EDIT:
If you want the hex digests, you could do something like:
environment = Rails.application.assets
asset_list = environment.each_logical_path(*Rails.application.config.assets).to_a
asset_list.map! { |asset| environment.find_asset(asset).digest_path rescue nil }.compact
Based on #kdeisz research, this code worked in the controller for the manifest file:
#assets = Rails.application.assets.each_logical_path(*Rails.application.config.assets).to_a
#assets = #assets.map{ |p| view_context.compute_asset_path(p) }
render 'manifest.text', content_type: 'text/cache-manifest'
The compute_asset_path function is needed to get the actual asset path.
Note: I haven't yet tested this in production mode. It works in development mode if you set config.assets.debug = false

Rails not recognizing lib files?

I have a lib/redirect_follower.rb file
Where I use the file, I include it with require 'RedirectFollower'
But rails is playing hard ball with this error:
no such file to load -- RedirectFollower
Any clues? Been banging my head over this for hours. Have tried auto loading all libs using application.rb but that didn't work either.
require is for including a file, not a class.
You need to require "redirect_follower", ie, the actual filename, not the class name. You may also need to add lib to your include path, or require "lib/redirect_follower".
In config/application.rb: add this:
config.autoload_paths << "#{config.root}/lib"
With this setting, your modules (i.e. files under lib/) will be automatically required so you don't have to require them anywhere (actually, you should never require them because that would have an negative effect on un/loading files by Rails).

Always preprocess a specific Javascript file with Rail 3.1 asset pipeline

Is there a way to always run the ERB preprocessor on a Javascript file?
I'm using Mustache to use the same templates on the client and server. I'd like to include these templates in my application.js files so they're available on the client. So I'm preprocessing my Javascript file (templates.js.erb, which then gets required in application.js) with erb:
App.templates.productShow = <%= MustacheController.read("product/show").to_json %>;
This works great but when I edit the "product/show.html.mustache" template I need to also edit "templates.js.erb" so Rails knows to recompile this file which then picks up the latest changes from the mustache template.
There's no issue running this in production since the assets get compiled when I deploy, but it's annoying when developing. Ideally I could set the preprocessor to run on "templates.js.erb" every time I reload. My current solution is to inline the Javascript in the application layout but it would be nice to keep it separate.
I ended up writing a guardfile for this that adds a timestamp to the end of the file. Just touching the file is enough for sprockets to recompile but if you're using git you need to actually alter the file. Otherwise anyone else who pulls in the code won't get the latest preprocessed files. Here's the code...
#!/usr/bin/ruby
guard 'mustache' do
watch(%r{app/templates/.+\.mustache})
end
require 'guard/guard'
module ::Guard
class Mustache < ::Guard::Guard
def run_on_change(paths)
# file to be updated when any mustache template is updated
file_name = "./app/assets/javascripts/templates.js.erb"
# get array of lines in file
lines = File.readlines(file_name)
# if last line is a comment delete
lines.delete_at(-1) if lines[-1].match /\/\//
# add timestamp
lines << "// #{Time.now}"
# rewrite file
File.open(file_name, "w") do |f|
lines.each{|line| f.puts(line)}
end
end
end
end
This seems to be a common complaint with the pipeline - that you have to touch a file that references variables for those changes to be reflected in development mode. A few people have asked similar questions, and I do not think there is a way around it.
Forcing Sprockets to recompile for every single request is not really a viable solution because it takes so long to do the compilation.
Maybe you could set up guard to watch your mustache directory and recompile templates.js.erb when you make changes to it. Similar to how guard-bundler watches your Gemfile and rebundles on change.

Rails 3.1 strategy for pre-compiling controller specific JS assets

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.

Resources