This is my application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
//= stub subscriptions
It has always worked as expected and subscription.js is another file which is compiled separately.
If I add this line at the top of subscriptions.js:
//= require jquery
The subscriptions.js is compiled as expected and includes jQuery, but jQuery disappears from application.js: in the browser console I get errors like
ReferenceError: jQuery is not defined.
I cannot find a way to have jquery compiled/included in both the manifest files.
I use a development environment with Rails 4.2.4 + Puma and the default jquery-rails gem.
It's the expected behavior of the stub directive: not only subscriptions but also all its dependencies will be stubbed.
The only solution is to avoid using require_tree and stub.
config.rb:
ready do
sprockets.append_path File.join root, 'bower_components'
end
application.coffee:
//= require 'dimple'
//= require 'director'
When I access to or build a js file which is served by Middleman + Sprockets, some modules installed through Bower return a not-found error. jQuery etc works normally.
Apparently some Bower modules are not Sprockets compatible. I needed to set a full path while jQuery requires only its name.
//= require 'jquery'
//= require 'dimple/dist/dimple.v2.0.0.js'
//= require 'director/build/director.js'
//= require 'spinjs/spin.js'
(I'm new both to Rails and SO, so excuse if I'm not doing it right)
I am trying to adapt a regular third-party web template in my rails 4 application. I have a vendor folder with other files and subfolders like bootstrap.js, Nivo-slider and Isotope which contain both .css and .js files.
So I moved all files and subfolders to vendor/assets and included //= require_tree ../../../vendor/assets/ in my application.js, as recommended here. So my application.js looks like
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree ../../../vendor/assets/
//= require_tree .
And in my layout file:
<%=stylesheet_link_tag "application.css" -%>
<%=javascript_include_tag "application" -%>
when I execute it on my server I get Sprockets::FileOutsidePaths exception:
Showing /home/valle/RoR/grifo/app/views/layouts/application.html.erb where line #25 raised:
/home/valle/RoR/grifo/vendor/assets/bootstrap.js isn't in paths: /home/valle/RoR/grifo/app/assets/images, /home/valle/RoR/grifo/app/assets/javascripts, /home/valle/RoR/grifo/app/assets/stylesheets, /home/valle/RoR/grifo/lib/assets/circle-flip-slideshow, /home/valle/RoR/grifo/lib/assets/isotope, /home/valle/RoR/grifo/lib/assets/javascripts, /home/valle/RoR/grifo/lib/assets/jflickrfeed, /home/valle/RoR/grifo/lib/assets/magnific-popup, /home/valle/RoR/grifo/lib/assets/mediaelement, /home/valle/RoR/grifo/lib/assets/nivo-slider, /home/valle/RoR/grifo/lib/assets/owl-carousel, /home/valle/RoR/grifo/lib/assets/rs-plugin, /home/valle/RoR/grifo/lib/assets/stylesheets, /home/valle/RoR/grifo/lib/assets/twitterjs, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/modernizr-rails-2.7.1/vendor/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/turbolinks-2.2.2/lib/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/jquery-rails-3.1.0/vendor/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/coffee-rails-4.0.1/lib/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/fonts, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/images, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/stylesheets, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/vendor/assets/stylesheets
I thought Sprockets would take all js or css files in all assets folders, precompile, unify and minify them, but now it seems I need to specify the path. How could I solve it?
Besides, is it a problem not to have separated javascript and css folders in vendors?
in rails 4 they have removed vendor folder,so,assets will not server from vendor.
in that Rails.application.config.assets.paths not contains vendor,if you want you have to add the path like
in config/application.rb
config.assets.paths << "#{Rails.root}/vendor/assets"
Update application.js file as
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
//= require otherJsFiles
And in application.css file require other css file as
*= require otherCssFiles
Require each js and css file in application.js and application.css file placed in vendor/assets.
I would like to require a javascript file that itself requires other javascript files:
In main.js
//= require plugins
... Shared Code
In plugins.js
//= require vendor/handlebars-1.0.rc.1.js
//= require vendor/jquery.animate-colors-min.js
//= require vendor/spin.min.js
However although sprockets adds the contents of plugins.js to main.js, it doesn't seem to evaluate the requires within it, so they are included as comments in the compiled main.js rather than it pulling in the js files and including them.
In the compiled main.js
//= require vendor/handlebars-1.0.rc.1.js
//= require vendor/jquery.animate-colors-min.js
//= require vendor/spin.min.js
...Shared Code
If I add these requires into main.js rather than plugins.js, they are propprly required and their contents is included in the compiled main.js
So why isn't sprockets evaluating the includes in plugins.js?
You should place your //= directives at the top of plugins.js
I`ve seen some information here but it looks kind of not audible for me.
I included //= require jquery-ui in application.js
Where should i place directory with styles and how it should be called? Could you please provide step by step instruction.. Thanks!
You simply put your stylesheets and javascripts as follow
directories path for javascript
vendor -> assets -> javascript
and require file in application.js
//= require jquery-ui
//= require_self
//= require_tree .
directories path for style sheets
vendor -> assets -> stylesheets
*=require style
*= require_tree .
It will sure work for you