@AndreiMotinga @andrea_moro I’m a recent convert from Jekyll after spending a day wrestling with Jekyll’s latest release and pipelined assets. Long story short, Jekyll 3 + jekyll-assets + a site containing Compass libraries proved to be a massive time sink.
I was also a bit surprised to read the following in the Middleman docs:
The Rails Asset Pipeline has been removed from the core of Middleman v4. Its future is in flux. If you heavily rely on this feature, we are looking for community maintainers to keep it running in v4. Please contact us.
Sprockets is such a mature and well developed platform that I can’t imagine managing assets without it. While the Middleman docs weren’t explicit in explaining this approach, I find tremendous value in using rails-assets.org [Rails Assets is the frictionless proxy between Bundler and Bower] to manage Bower-based assets through my existing Gemfile, and then letting the asset pipeline handle the rest.
Here’s what worked quickly and easily for me on a new Middleman 4 site:
-
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.
-
In 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
- 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
-
run bundle install
-
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.
Relative to a completely separate infrastructure for managing frontend dependencies, I don’t know what could possibly be easier.
The only issues I’ve run into are edge cases where the assets are not packaged in a traditional way, or if I only need a subset of the library’s functionality. In those cases, a quick
cd `bundle show gemname`
and opening up the library in my text editor shows me 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
Long live sprockets!
