sinatra-asset-pipeline

An asset pipeline implementation for Sinatra based on Sprockets with support for CoffeeScript, SASS, SCSS, LESS, ERB as well as CSS (SASS, YUI) and JavaScript (uglifier, YUI, Closure) minification.

sinatra-asset-pipeline supports both compiling assets on the fly for development as well as precompiling assets for production.

Installation

Include sinatra-asset-pipeline in your project's Gemfile:

gem 'sinatra-asset-pipeline'

Make sure to add the sinatra-asset-pipeline Rake task in your applications Rakefile:

require 'sinatra/asset_pipeline/task.rb'
require './app'

Sinatra::AssetPipeline::Task.define! App

Now, when everything is in place you can precompile assets located in assets/<asset-type> with:

$ RACK_ENV=production rake assets:precompile

And remove old compiled assets with:

$ RACK_ENV=production rake assets:clean

Example

In it's most simple form you just register the Sinatra::AssetPipeline Sinatra extension within your application:

Bundler.require

require 'sinatra/asset_pipeline'

class App < Sinatra::Base
  register Sinatra::AssetPipeline

  get '/' do
    haml :index
  end
end

However, if your application doesn't follow the defaults you can customize it as follows:

Bundler.require

require 'sinatra/asset_pipeline'

class App < Sinatra::Base
  # Include these files when precompiling assets
  set :assets_precompile, %w(app.js app.css *.png *.jpg *.svg *.eot *.ttf *.woff)

  # Logical paths to your assets
  set :assets_prefix, %w(assets, vendor/assets)

  # Use another host for serving assets
  set :assets_host, '<id>.cloudfront.net'

  # Serve assets using this protocol
  set :assets_protocol, :http

  # CSS minification
  set :assets_css_compressor, :sass

  # JavaScript minification
  set :assets_js_compressor, :uglifier

  # Register the AssetPipeline extention, make sure this goes after all customization
  register Sinatra::AssetPipeline

  get '/' do
    haml :index
  end
end

Now when everything is in place you can use all helpers provided by sprockets-helpers, an example:

body {
  background-image: image-url('cat.png');
}

Note that you don't need to require sprockets-helpers inside your code to leverage the functionallity given to you by the integration, sinatra-asset-pipeline handles that for you.

CSS and JavaScript minification

If you would like to use CSS and/or JavaScript minification make sure to require the needed gems in your Gemfile:

Minifier	Gem
:sass	sass
:closure	closure-compiler
:uglifier	uglifier
:yui	yui-compressor

Compass integration

Given that we're using sprockets-sass under the hood we have out of the box support for compass. Just include the compass gem in your Gemfile and include the compass mixins in your app.css.scss file.