Skip to content

Latest commit

 

History

History
80 lines (57 loc) · 2.84 KB

usage-with-rails-assets.md

File metadata and controls

80 lines (57 loc) · 2.84 KB
Raw

Usage with Rails Assets

One of the simplest ways to use middleman-sprockets to manage frontend assets is via Rails Assets. Rails Assets is a frictionless proxy between Bundler and Bower to manage Bower-based assets through your existing Gemfile, and then letting the asset pipeline handle the rest.

Here's a quick guide to using Rails Assets with a new Middleman 4 site:

  1. Go to rails-assets.org and identify your dependency and version. Chances are it's already there; rails-assets then packages your dependency as a gem on demand for consumption by Bundler.

  2. In your Gemfile, add sprockets and a rails-assets block with the gemfiles chosen from step 1:

# Gemfile
gem 'middleman-sprockets', '4.0.0.rc.3'

source 'https://rails-assets.org' do
  gem 'rails-assets-bootstrap-autohidingnavbar', '1.0.0'
  gem 'rails-assets-jquery', '2.1.1'
  gem 'rails-assets-slick.js', '1.5.7'
end
  1. In your config.rb, add the following block to enable the asset pipeline and add RailsAssets gems to your load path:
# config.rb
# General configuration
activate :sprockets

if defined? RailsAssets
  RailsAssets.load_paths.each do |path|
    sprockets.append_path path
  end
end

  1. run bundle install

  2. Add the necessary import statements to your site.css.scss and all.js files. Note that rails-assets may suggest a sprockets //= slick.js import statement, but if the library is packaged with SASS, you likely want to use a SASS import @import "slick.js"; instead.

You may run into edge cases where the assets in the generated gem are not packaged in a traditional way, or if you only need a subset of the library's functionality. In those cases, a quick

cd `bundle show gemname`

and opening up the library in your text editor will show you the necessary path & file information. In the example above, since slick.js ends with .js, make sure you specify the javascript import as:

 //= require slick.js.js

Finally, note that you can still use traditional hand-packaged gems like bootstrap-sass and font-awesome-sass in your Gemfile as well. Here's a complete Gemfile for reference:

# If you do not have OpenSSL installed, change
# the following line to use 'http://'
source 'https://rubygems.org'

# For faster file watcher updates on Windows:
# gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw]

# Windows does not come with time zone data
# gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]

# Middleman Gems
gem 'middleman', '>= 4.0.0'
gem 'middleman-livereload'
gem 'middleman-compass', '>= 4.0.0'
gem 'middleman-sprockets', '4.0.0.rc.3'

gem 'bootstrap-sass'
gem 'font-awesome-sass'

source 'https://rails-assets.org' do
  gem 'rails-assets-bootstrap-autohidingnavbar', '1.0.0'
  gem 'rails-assets-jquery', '2.1.1'
  gem 'rails-assets-slick.js', '1.5.7'
end