I have a super simple engine for loading some vendored assets: https://github.com/febuiles/strap_on
I include it in my application's Gemfile like this: gem "strap_on".
In my application.css file I have: *= require twitter_bootstrap.
I start the application and I get couldn't find file 'twitter_bootstrap'.
I've notice that the path for the engine is not in Rails.application.config.assets.paths. Any idea of what I might be doing wrong here?
In your gemspec file - it doesnt look like you include files from the vendor directory, guessing that is your main issue, check asset path after adding and reinstalling - if you look in your gem repository now, i am guessing the files in vendor are not included
Also i would move twitter_bootstrap.js into the twiiter_bootstrap directory and rename it index.js, not sure if this is required or not (you will need to update paths in that file also)
You might also be interested in this post? http://house9.blogspot.com/2011/06/rails-31-asset-gem.html
Related
I have a local gem. And there is a js file:
app/assets/javascripts/autocomplete_location/location_autocomplete.js
Now I am trying to use this gem in my rails project. I am able to use it's other ruby files, but can't include the above js file. I have tried putting engine.rb file in my gem. Still no luck.
I tried
//= require autocomplete_locations/location_autocomplete
in application.js file of my project. Still, when I start server and open any page, it throws this error:
Sprockets::FileNotFound > couldn't find file 'autocomplete_locations/location_autocomplete' with type 'application/javascript'
//= require autocomplete_locations/location_autocomplete is still not the same as 'autocomplete_locations/location_autocomplete. The folder being required is autocomplete_locations and the name of the folder containing the file is autocomplete_location. I didn't catch that neither on my previous comment. If that does not solve the issue. Try requiring and testing a different javascript file just to make sure it is not a problem with the asset pipeline.
Thanks for your suggestions, after struggling through several hit and trial, I solved this by adding below code in lib/autocomplete_locations.rb:
class Engine < ::Rails::Engine
environment = Sprockets::Environment.new
environment.append_path '../vendor/assets/javascripts'
end
Now I am able to require my assets in rails project.
I'm wondering what the best way is to use images & fonts from bower packages with middleman. As an example, I'm trying to add the slick.js carousel to my project. It's on bower and includes css, js, images, and fonts in the bower code.
With middleman, I have things set up where I've added the bower_components directory to the path for sprockets and compass, so the scss and js files are getting compiled correctly and working fine.
But the images and fonts aren't getting put anywhere where they'll be used. The slick.js library uses scss and is set up to use the compass image-url and font-url functions if they exist, meaning I need to somehow get the assets from the bower_components directory to be served from the same place as all my own images and fonts, and in a way that works in both the development middleman server mode as well as when running build.
How do I do this?
Obviously possible solutions are just to vendorize the slick.js library directly into my code or include it from the cdn where it's already hosted and not worry about not having it compiled into my single css and js files. Either could work fine but I'm wondering about the general case, surely this is common scenario for anyone using bower and middleman.
I figured it out - I thought compass was for requiring scss files and sprockets was just for the js, but middleman also uses sprockets (the middleman-sprockets library) for copying arbitrary static assets.
It's a bit manual and verbose (if there were a lot more files middleman suggests writing a script to auto-discover them by file extension types and import them) but my solution is to include the following in the config.rb file:
# set local vars I'll need to access later
images_dir = 'images'
set :images_dir, images_dir
# ... other config
sprockets.import_asset('slick-carousel/slick/ajax-loader.gif') {|p| "#{images_dir}/ajax-loader.gif"}
I use grunt, but it's the same issue. Generally you have the following options:
-Commit what you need in the bower_components directory right in to source control and reference your resources from there (somewhat recommended especially if something external is down when you are doing a build), or if you don't like exposing bower_components in URLs, create a route that directs to your bower_components folder
-Copy components on build/middleman script execution to a specified path. There will be no resources to check in for this option, you just choose a destination to reference in your code and have middleman copy your components out there.
We have a very complex library for styles and scripts that is maintained by a collaborative team. This code is a large set of less, javascript, font and image files that is built using grunt and a number of modules installed with NPM.
What I want to do is have a post operation step in a gem that does this build and then copies the resulting files to the appropriate places.
Is there a way for this to happen in the Gem installation process itself so that I am not dependent on having to run a rake task or something.
I am trying to be as unobtrusive as possible on the existing project since it is part of a large enterprise wide initiative and is used by many other projects that are not rails etc.
File structure is rather cumbersome and I can't re-arrange, at least without running the npm install and grunt task.
You don't need to copy files at all.
Once such assets gem installed from Gemfile, it's assets path is available in app's assets lookup path. So you can use it directly in application.css and application.js, as well as image files.
Suppose your gem 'foo' structure is like this
foo
-lib
--foo
-vendor
--assets
---javascripts
----foobar.js
Then in your application.js you can do this
//= require foobar
Same is true for application.css.
You can keep the js build logic in gem, and only put the built foobar.js under vendor, so in Rails you only need to require one file.
I've got a Rails site with a Jekyll blog incorporated, using the Bloggy gem.
I'd like a similar look for the main site and the blog, so I want to use the css in app/assets/stylesheets, but those files are in css.scss format. Jekyll (in a Bloggy setup) looks for css in config/jekyll/css, and seems to only want .css files; symlinking the Rails css directory into the Jekyll hierarchy doesn't seem to to work.
Is there a way to take advantage of the asset pipeline so that when I run jekyll:build, SCSS files from the Rails app are made into CSS files, placed in the appropriate jekyll directory, and bundled with the latest Jekyll build as it's placed into the /public/blog folder?
Thanks!
Ended up getting through this by:
Using the jekyll-sass gem to allow automatic transformation of the Rails app's .css.scss into .css.css files. By symlinking the Rails app/assets/stylesheets directory into Bloggy's config/jekyll/css, this put files with the right content but wrong extensions in the correct place.
Writing a rake task to make the .css.css files into .css files.
desc 'Make .css.css files into .css files'
task :css_css do
Dir.glob('public/blog/css/*.css.css').each do |file|
puts `mv #{file} #{file.gsub(/\.css\.css$/, '.css')}`
end
end
Not the prettiest solution, but it works.
#Matthew.. You have a nice solution.. For this part I did some stuffs manually. Like I added config/jekyll/css files as .css extension rather than .css.scss so when we run "rake generate" for bloggy the right format files are created on the folder public/blog/ rather css.scss.
I have made the changes in my bloggy portfolio theme project repository. If you are planning to use my version of code, I have did some changes like added robots.txt, sitemap, and integrated bootstrap to the project. I have also removed all database connections from the rails project since it was showing errors while deploying into heroku.
I've got a bunch of 'bootstrap' sass files I'd like to stick in my applications /lib directory, following the new conventions of the asset pipeline.
However, I need to import these into my application.css.scss rather than requiring them, as I would like to share some color variables etc. throughout the app. I have not been able to figure out a way to get #import to grab a .scss file from /lib/assets/stylesheets.
Any suggestions?
#import should look for any .css.scss files located in your assets load path, be it in app/assets/stylesheets, lib/assets/stylesheets, vendor/assets/stylesheets, or any additional paths added by gems, so it's odd that you're getting an error.
Note you do not need to pass a folder name when using #import unless the file is in a subdirectory of assets/stylesheets - sass-rails will look through every folder on your load path and see if the resource exists relative to those folders.
To ensure that lib/assets/stylesheets is in your assets load path (which it should be, since it's a default option) crack open a Rails prompt and type Rails.application.config.assets.paths. As an example, here's the result for one of my applications:
ruby-1.9.3-p0 :012 > Rails.application.config.assets.paths
=> ["/Users/tom/ruby/qa/app/assets/images",
"/Users/tom/ruby/qa/app/assets/javascripts",
"/Users/tom/ruby/qa/app/assets/stylesheets",
"/Users/tom/ruby/qa/lib/assets/stylesheets",
"/Users/tom/ruby/qa/vendor/assets/javascripts",
"/Users/tom/ruby/qa/vendor/assets/stylesheets",
"/Users/tom/.rvm/gems/ruby-1.9.3-p0/gems/jquery-rails-1.0.14/vendor/assets/javascripts",
"/Users/tom/.rvm/gems/ruby-1.9.3-p0/gems/bootstrap-sass-1.4.0/vendor/assets/javascripts",
"/Users/tom/.rvm/gems/ruby-1.9.3-p0/gems/bootstrap-sass-1.4.0/vendor/assets/stylesheets"]
It's also worth ensuring that sass-rails is up to date and running the latest version, since I believe early versions had limit support in terms of cross-folder #import.
N.B: I also believe that convention suggests files such as Bootstrap or jQuery should go in your vendor/assets folder rather than lib/assets
I had the same problem, and it was because i forgot restart server after add files to lib directory.