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'
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 its 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.