# Sprockets: Rack-based asset packaging
Sprockets is a Ruby library for compiling and serving web assets.
It features declarative dependency management for JavaScript and CSS
assets, as well as a powerful preprocessor pipeline that allows you to
write assets in languages like CoffeeScript, Sass, SCSS and LESS.
# Installation #
Install Sprockets from RubyGems:
$ gem install sprockets
Or include it in your project's `Gemfile` with Bundler:
gem 'sprockets', '~> 2.0'
# Understanding the Sprockets Environment #
You'll need an instance of the `Sprockets::Environment` class to
access and serve assets from your application. Under Rails 3.1 and
later, `YourApp::Application.assets` is a preconfigured
`Sprockets::Environment` instance. For Rack-based applications, create
an instance in `config.ru`.
The Sprockets `Environment` has methods for retrieving and serving
assets, manipulating the load path, and registering processors. It is
also a Rack application that can be mounted at a URL to serve assets
over HTTP.
## The Load Path ##
The *load path* is an ordered list of directories that Sprockets uses
to search for assets.
In the simplest case, a Sprockets environment's load path will consist
of a single directory containing your application's asset source
files. When mounted, the environment will serve assets from this
directory as if they were static files in your public root.
The power of the load path is that it lets you organize your source
files into multiple directories -- even directories that live outside
your application -- and combine those directories into a single
virtual filesystem. That means you can easily bundle JavaScript, CSS
and images into a Ruby library and import them into your application.
### Manipulating the Load Path ###
To add a directory to your environment's load path, use the
`append_path` and `prepend_path` methods. Directories at the beginning
of the load path have precedence over subsequent directories.
environment = Sprockets::Environment.new
environment.append_path 'app/assets/javascripts'
environment.append_path 'lib/assets/javascripts'
environment.append_path 'vendor/assets/jquery'
In general, you should append to the path by default and reserve
prepending for cases where you need to override existing assets.
## Accessing Assets ##
Once you've set up your environment's load path, you can mount the
environment as a Rack server and request assets via HTTP. You can also
access assets programmatically from within your application.
### Logical Paths ###
Assets in Sprockets are always referenced by their *logical path*.
The logical path is the path of the asset source file relative to its
containing directory in the load path. For example, if your load path
contains the directory `app/assets/javascripts`:
Asset source file
Logical path
app/assets/javascripts/application.js
application.js
app/assets/javascripts/models/project.js
models/project.js
In this way, all directories in the load path are merged to create a
virtual filesystem whose entries are logical paths.
### Serving Assets Over HTTP ###
When you mount an environment, all of its assets are accessible as
logical paths underneath the *mount point*. For example, if you mount
your environment at `/assets` and request the URL
`/assets/application.js`, Sprockets will search your load path for the
file named `application.js` and serve it.
Under Rails 3.1 and later, your Sprockets environment is automatically
mounted at `/assets`. If you are using Sprockets with a Rack
application, you will need to mount the environment yourself. A good
way to do this is with the `map` method in `config.ru`:
require 'sprockets'
map '/assets' do
environment = Sprockets::Environment.new
environment.append_path 'app/assets/javascripts'
environment.append_path 'app/assets/stylesheets'
run environment
end
map '/' do
run YourRackApp
end
### Accessing Assets Programmatically ###
You can use the `find_asset` method (aliased as `[]`) to retrieve an
asset from a Sprockets environment. Pass it a logical path and you'll
get a `Sprockets::BundledAsset` instance back:
environment['application.js']
# => #
Call `to_s` on the resulting asset to access its contents, `length` to
get its length in bytes, `mtime` to query its last-modified time, and
`pathname` to get its full path on the filesystem.
# Using Engines #
Asset source files can be written in another language, like SCSS or
CoffeeScript, and automatically compiled to CSS or JavaScript by
Sprockets. Compilers for these languages are called *engines*.
Engines are specified by additional extensions on the asset source
filename. For example, a CSS file written in SCSS might have the name
`layout.css.scss`, while a JavaScript file written in CoffeeScript
might have the name `dialog.js.coffee`.
## Styling with Sass and SCSS ##
[Sass](http://sass-lang.com/) is a language that compiles to CSS and
adds features like nested rules, variables, mixins and selector
inheritance.
If the `sass` gem is available to your application, you can use Sass
to write CSS assets in Sprockets.
Sprockets supports both Sass syntaxes. For the original
whitespace-sensitive syntax, use the extension `.css.sass`. For the
new SCSS syntax, use the extension `.css.scss`.
## Styling with LESS ##
[LESS](http://lesscss.org/) extends CSS with dynamic behavior such as
variables, mixins, operations and functions.
If the `less` gem is available to your application, you can use LESS
to write CSS assets in Sprockets. Note that the LESS compiler is
written in JavaScript and the `less` gem (on MRI) uses `therubyracer`
which embeds the V8 JavaScript runtime in Ruby, while on JRuby you're
going to need `therubyrhino` gem installed.
To write CSS assets with LESS, use the extension `.css.less`.
## Scripting with CoffeeScript ##
[CoffeeScript](http://jashkenas.github.com/coffee-script/) is a
language that compiles to the "good parts" of JavaScript, featuring a
cleaner syntax with array comprehensions, classes, and function
binding.
If the `coffee-script` gem is available to your application, you can
use CoffeeScript to write JavaScript assets in Sprockets. Note that
the CoffeeScript compiler is written in JavaScript, and you will need
an [ExecJS](https://github.com/sstephenson/execjs)-supported runtime
on your system to invoke it.
To write JavaScript assets with CoffeeScript, use the extension
`.js.coffee`.
## JavaScript Templating with EJS and Eco ##
Sprockets supports *JavaScript templates* for client-side rendering of
strings or markup. JavaScript templates have the special format
extension `.jst` and are compiled to JavaScript functions.
When loaded, a JavaScript template function can be accessed by its
logical path as a property on the global `JST` object. Invoke a
template function to render the template as a string. The resulting
string can then be inserted into the DOM.