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.
Related
I'm trying to configure Webpacker to work with a Rails engine. I'm specifically interested in how people are setting up their webpacker.yml to move their engine's assets to the main app's /public/ folder.
First, I've followed the Webpacker instructions for Using in Rails Engines. However, Step 7 stumps me. The idea here is to set the public_root_path to your app's /public folder. I could obviously hard-code the correct path on my personal machine, but that's unsustainable for production or other devs. I can't rely on ERB to have a dynamic path either.
I also tried the second option of Step 7 which involves middleware, but it didn't seem to have any effect.
I ultimately want to be able to import JavaScript from the engine into the main app from the app/javascript/packs/application.js file. How do I get Webpacker to find the files from the engine without hard-coding the path?
Hello very amazing coders,
I'm currently using npm to manage angular2 dependencies. I then manually copy the required angular2 files from node_modules into my rails vendor folder. The rails will make those files available for me to load. However, I've read that vendor files should not be in source control. Ok, fair enough, I agree. However, if I .gitignore these files, they do not make it onto heroku. And subsequently my <script></script> tags in app/views/layouts/application.html.erb return 404's not found.
I'm looking for overall guidance on how you guys do vendor assets in production vs. development? In my case, a gem for angular2 source files does not exist, so pretend that is not an option.
There's so many flavors for this and as everything else it depends on your project. Here are some:
1- You can use cdn versions of the libraries in production, which is supposedly better because there's a good chance that people visiting your page would have already downloaded jquery or w/e from a cdn while visiting another page so you they don't have to download yet another copy for your page alone. Like https://www.maxcdn.com/ or https://developers.google.com/speed/libraries/.
2- You can have one repo with your code on it, sources and all, without the vendor files and one more repo connected to heroku where you push only the distributable build of your project including if you want, the vendor files.
3- Run the same npm install and all other configuration scripts you normally use from your production server, Heroku should allow you to do this np, or at least have a plugin for it.
I hope this helps.
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 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.
I'm developing the web site using Aptana 2.04.
When i say "script/server" from the project folder, everything is ok
After copying the project folder to another place, and saying "script/server", server starts, but jammit does't loads the packaged assets and i see the web page without any css and js files loaded.
I played a little with this problem, and found following:
When i say "jammit" from the non-copied folder, it packages the assets.
When i say "jammit" from the copied folder, i get an error "Jammit Warning: No assets match" for each .js and .css file
Whats wrong here ?
Help !
Update 1
I refer to each asset in "assets.yml" in follwing way:
javascripts:
common:
- my_styles.css
my_styles.css are in "public/assets" folder.
I also tried "- public/assets/my_styles.css", but it does't work
Update 2
All works in production and development modes, when i starting the server from my project folder.
But, when i just copy the project folder to some other place, i get the jammit errors. Two folders are the same byte by byte, but the behaviour is different. This is what confuses me ...
Doesn't look like you're referring to your assets properly -- Jammit will cache packaged assets into the public/assets folder -- the files shouldn't be in there to start with. Here's an example directory structure and assets.yml for you:
Directories:
public
javascripts
script1.js
script2.js
script3.js
assets.yml:
javascripts:
common:
- public/javascripts/*.js
Hope that helps you out. In development, you should see all scripts included as individual tag, and in production, you should see a single assets/common.js file.