Sinatra AssetPack

Assets block

class App < Sinatra::Base
  register Sinatra::AssetPack

  # Style 1
  assets do
    css :hello, [ '/css/*.css' ]
    js_compression :yui
  end

  # Style 2
  assets do |a|
    a.css :hello, ['/css/*.css' ]
    a.js_compression :yui
  end
end

All configuration happens in the assets block. You may invoke it in 2 ways:

Getting options

App.assets
App.assets.js_compression   #=> :yui

Invoking it without a block allows you to access the options. This works for almost all the options, with the exception for css, js and serve.

assets.serve

# Usage
serve 'PATH', :from => 'LOCALPATH'

Serves files from LOCALPATH in the URI path PATH. Both parameters are required.

serve '/js', from: '/app/javascripts'

assets.js_compression
assets.css_compression

# Usage:
assets {
  js_compression :ENGINE
  js_compression :ENGINE, OPTIONS_HASH
  css_compression :ENGINE
  css_compression :ENGINE, OPTIONS_HASH
}

Sets the compression engine to use for JavaScript or CSS. This defaults to :jsmin and :simple, respectively.

If OPTIONS_HASH is given as a hash, it sets options for the engine to use.

assets {
  css_compression :sqwish
  css_compression :sqwish, :strict => true
}

assets.js_compression_options
assets.css_compression_options

# Usage:
assets {
  js_compression_options HASH
  css_compression_options HASH
}

Sets the options for the compression engine to use. This is usually not needed as you can already set options using js_compression and css_compression.

css_compression_options :munge => true

assets.css
assets.js

# Usage:
assets {
  css :NAME, [ PATH1, PATH2, ... ]
  css :NAME, 'URI', [ PATH1, PATH2, ... ]
  js:NAME, [ PATH1, PATH2, ... ]
  js:NAME, 'URI', [ PATH1, PATH2, ... ]
}

Adds packages to be used.

The NAME is a symbol defines the ID for that given package that you can use for the helpers. That is, If a CSS package was defined as css :main, [ ... ], then you will need to use <%= css :main %> to render it in views.

the URI is a string that defines where the compressed version will be served. It is optional. If not provided, it will default to "/assets/name.type" (eg: /assets/main.css).

the PATHs is an array that defines files that will be served. Take note that this is an array of URI paths, not local paths.

If a PATH contains wildcards, it will be expanded in alphabetical order. Redundancies will be taken care of.

class App < Sinatra::Base
  assets {
    serve '/js', from: '/app/javascripts'
    js :application, [
      '/js/vendor/jquery.*.js',
      '/js/vendor/jquery.js'
    ]
  }
end

# In views: <%= js :application %>

assets.ignore

# Usage:
assets {
  ignore FILESPEC
}

Excludes any URL paths that match the given spec.

These files will not show up in packages, and they will not be accessible.

By default, .* and _* are ignored. The former protects folders such as .svn from being accessed, and the latter protects Sass partial files from being accessed directly.

Note that this matches against URL paths, not local file paths. This means something like *.scss will not work, as all stylesheet files will be compiled to .css.

class App < Sinatra::Base
  assets {
    # Ignores all files matching *.private.js in any folder.
    ignore '*.private.js'

    # Ignores all files in `/app/js/foo/**/*`
    ignore '/js/foo'
  }
end

assets {
  clear_ignores!
  ignore '*.private.js'
}

assets.ignored?("/css/_chrome.css")   #=> true

assets.prebuild

# Usage:
prebuild {true|false}

Caches the built packages on application startup.

If this is not used, the packages will be minified when they are first requested. This only has an effect in the production environment (or when Sinatra's reload_templates is otherwise set to false).

class App < Sinatra::Base
  assets {
    js_compression :closure

    js :application, [
      '/js/vendor/jquery.*.js',
      '/js/vendor/jquery.js'
    ]
    prebuild true
  }
end

# $ RACK_ENV=production ruby app.rb
# ** Building /assets/application.js...
# == Sinatra/1.2.6 has taken the stage on 4567 for production
# >> Thin web server (v1.2.11 codename Bat-Shit Crazy)
# >> Maximum connections set to 1024
# >> Listening on 0.0.0.0:4567, CTRL+C to stop

<%= css %>

# Usage:
<%= css :PACKAGE %>
<%= css :PACKAGE_1, :PACKAGE_2, ...  :PACKAGE_N, OPTIONS_HASH %>
<%= css :PACKAGE, OPTIONS_HASH %>

Shows a CSS package named PACKAGE. If OPTIONS_HASH is given, they will we passed onto the <link> tag to be generated as attributes.

You may specify as many packages as you need, as shown in the second usage line.

<%= css :main, media: 'screen' %>

<!-- Output: -->
<link rel='stylesheet' type='text/css' class='/css/main.873984.css' media='screen' />

<%= css :base, :app, :main, media: 'screen' %>

<!-- Output: -->
<link rel='stylesheet' type='text/css' class='/css/base.873984.css' media='screen' />
<link rel='stylesheet' type='text/css' class='/css/app.873984.css' media='screen' />
<link rel='stylesheet' type='text/css' class='/css/main.873984.css' media='screen' />

<%= js %>

# Usage:
<%= js :PACKAGE %>
<%= js :PACKAGE_1, :PACKAGE_2, ...  :PACKAGE_N, OPTIONS_HASH %>
<%= js :PACKAGE, OPTIONS_HASH %>

Same as css, but obviously for JavaScript. You may also specify as many packages as you need, just with css.

<%= js :main, id: 'main_script' %>

<!-- Output: -->
<script type='text/javascript' src="/img/spacer.gif"> 

<%= img %>

# Usage:
img 'SRC'
img 'SRC', OPTIONS_HASH

<%= img '/images/icon.png', alt: 'Icon' %>

<!-- Output: -->
<img src="/img/spacer.gif">