Sprockets processing image assets from a gem - ruby-on-rails

I'm migrating from sprockets 3 to sprockets 4 and v4 seems to ignore assets from gems. Those were automatically handled by v3, but I can't seem to find anything about porting this behaviour.
For example there's gem mediaelement_rails which includes mediaelement_rails-0.8.2/app/assets/images/mediaelement_rails/skipback.png
In sprockets v3 it was automatically included during asset compilation, but now, even with manifest:
//= require mediaelement_rails
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
The skipback.png is not included.
I could do this very explicitly: query the gem path and add it to the assets paths. But is there a way to do this automatically similar to v3?

Sprockets v4 no longer automatically includes gem resources.
To include gem resources in your assets, you must explicitly register the gem paths that contain the resources. This can be done using the configuration: config.assets.paths in your config/application.rb file.
For example, to include the mediaelement_rails gem image resources in your assets, you could add the following to your config/application.rb file:
config.assets.paths << Rails.root.join('vendor', 'assets', 'mediaelement_rails', 'images')
This will add the vendor/assets/mediaelement_rails/images directory to the assets path.
If the gem you're using isn't following the standard naming conventions for its assets (i.e. putting your assets in subdirectories named after javascripts, stylesheets, or images), you'll need to explicitly register those directories. using a config.assets.precompile setting in your config/application.rb file.
Here they talk a little about inserting paths that don't follow a pattern
Here, the rails documentation also already shows something about this

Related

Ruby Sprockets v4.0 upgrade FileNotFound (assets extension mismatch .coffee, .scss - mime types?)

I recently updated my app to use Sprockets 4.0: https://www.rubydoc.info/gems/sprockets/4.0.0
I introduced the manifest.js file as described here: https://github.com/rails/sprockets/blob/master/UPGRADING.md
My current assets are described in: application.coffee, application.light.coffee, application.scss, application.light.scss files.
On starting the server I get errors of type:
couldn't find file 'jquery' with type 'text/coffeescript'
Asset is available with .js extension.
couldn't find file 'select2' with type 'text/scss'
Asset is available with .css extention.
I was previously using sprockets v3.7; the gemfiles have correctly been added.
I have tried clearing the tmp/cache after upgrading.
Can someone recommend the path forward here. I have cross-checked all threads for this question.
So far I am resorting to renaming application.coffee -> application.js, application.cscc -> application.css but it doesn't look like the ideal solution.
manifest.js
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
The issue was arising because we were precompiling few assets using Rails.application.config.assets.precompile - application.light.coffee, application.light.scss
Once I removed this the issue with extension stopped surfacing.
If anyone has context to why the above errors were thrown will help to clarify the answer.

Rails 5 - How to include all vendor assets in the asset pipeline?

I've found several different threads on including assets in the vendor/assets directory but did not find anything that worked for me. Previously, I had all of my vendor assets in the app/ directory but moved the JavaScript to the vendor/assets/javascripts/ directory and the CSS to the vendor/assets/stylesheets/ directory.
I'm now trying to load my vendor assets both in development and production, and they're not loading at all. Here's my assets.rb file:
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += [
Rails.root.join('vendor/assets/javascripts/*').to_s,
Rails.root.join('vendor/assets/stylesheets/*').to_s
]
I've also tried adding the vendor/assets/ directories to Rails.application.config.assets.paths, and that didn't help.
How can I include all of the vendor assets in the asset pipeline?
UPDATE
I got my vendor JavaScript to load by adding the following to app/assets/javascripts/application.js:
//= require_tree ../../../vendor/assets/javascripts/.
However, I'm using Sass and am still not able to get the SCSS files to load.
I finally figured it out after remembering that the Rails asset load paths and Sprockets are different systems. Here's what I did:
In config/initializes/assets.rb, I added the following lines:
# Add additional assets to the asset load path
Rails.application.config.assets.paths += [
Rails.root.join('vendor', 'assets').to_s
]
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += [
Rails.root.join('vendor/assets/javascripts/*').to_s,
Rails.root.join('vendor/assets/stylesheets/*').to_s
]
The first block adds vendor assets to the Rails asset path. This allows me to use vendor assets in view helpers (ex: image_tag). The second block allows my vendor JavaScript and CSS to be precompiled with the rest of my assets.
Then, I added the following line to app/assets/javascripts/application.js above //= require_tree .:
//= require_tree ../../../vendor/assets/javascripts/.
This will automatically add to my application all of the JavaScript files I put into vendor/assets/javascripts.
For the Sass, I added the following to app/assets/stylesheets/application.sass:
#import "../../../vendor/assets/stylesheets/*";
I added this line before #import "*"; so that my own application's styles will take preference. This will include all of the vendor Sass files in with my application. Then I renamed all of my vendor .css files to use the .scss extension.
Now that development is working fine, I was worried about precompilation. I ran rails assets:precompile locally, and sure enough, all of my vendor assets were included!

Rails Assets Precompile in production mode error

When I run rake assets:prcompile RAILS_ENV=production, I am getting below error.But if i run in development mode it runs fine.
rake assets:precompile RAILS_ENV=production
rake aborted!
Uglifier::Error: fs redeclared
Environment
Rails 5.0.7
Ruby 2.4.1
Could someone helps to resolve this one
Got the issue.In my application.js file have below codes
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
As per functionality of require_tree, it will include current path's all js files recursively. Refer the link https://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
In JavaScript files, Sprockets directives begin with //=. In the above case, the file is using the require and the require_tree directives. The require directive is used to tell Sprockets the files you wish to require. Here, you are requiring the files rails-ujs.js and turbolinks.js that are available somewhere in the search path for Sprockets. You need not supply the extensions explicitly. Sprockets assumes you are requiring a .js file when done from within a .js file.
The require_tree directive tells Sprockets to recursively include all JavaScript files in the specified directory into the output. These paths must be specified relative to the manifest file. You can also use the require_directory directive which includes all JavaScript files only in the directory specified, without recursion.
In my application , Gruntfile.js file was declared in two js folders.So, when I was doing the precompile,as the file was declared in two js , it throws error when it tried to compress that file

Adding angular-datepicker to rails with bower-rails

Bower-rails looks like it should be turn key, and is for very popular libraries like angular and angular-resource, but how can I add another less popular, but bower enabled, library?
e.g. - https://github.com/g00fy-/angular-datepicker, https://angular-ui.github.io/angular-google-maps/#!/
To my Bowerfile I have added
asset 'angular-datepicker', github: "g00fy-/angular-datepicker"
and run rake bower:install. This installs the files to my vendor/assets/bower_components folder with the other libraries that do work (angular, angular-resource, etc).
But when I add the path to my application.js file, it claims not to be able to find the file.
//= require angular-datepicker
I've already added the path to the bower_components to my application.rb file
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
How can I add these bower libraries to rails?
Seems like you have to //= require angular-datepicker/angular-datepicker
Please checkout https://github.com/rharriso/bower-rails/issues/37.

How do I require subdirectories of /app/assets/javascripts in Rails 3.1

I want to separate out my javascripts into separate subdirectories in my Rails 3.1 app.
For instance I have a /modules directory inside /app/assets/javascripts
A way to either require all the contents of the directory or each file individually would be helpful.
Edit: To clarify, I want to do this from my application.js coffeescript file.
I believe the way to do this in Sprockets is
#= require_tree modules
or
#= require_tree ./modules
if you want to select a subdirectory relative to the CoffeeScript file, rather than relative to app/assets/javascripts (see this issue).

Resources