|
|
|
@ -13,7 +13,7 @@ endprologue.
|
|
|
|
|
|
|
|
|
|
h3. What is the Asset Pipeline?
|
|
|
|
|
|
|
|
|
|
The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages such as CoffeeScript, SCSS and ERB.
|
|
|
|
|
The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages such as CoffeeScript, Sass and ERB.
|
|
|
|
|
|
|
|
|
|
Prior to Rails 3.1 these features were added through third-party Ruby libraries such as Jammit and Sprockets. Rails 3.1 is integrated with Sprockets through ActionPack which depends on the +sprockets+ gem, by default.
|
|
|
|
|
|
|
|
|
@ -36,7 +36,7 @@ The default behavior in Rails 3.1 and onward is to concatenate all files into on
|
|
|
|
|
|
|
|
|
|
The second feature is to minify or compress assets. For CSS, this usually involves removing whitespace and comments. For JavaScript, more complex processes can be applied. You can choose from a set of built in options or specify your own.
|
|
|
|
|
|
|
|
|
|
The third feature is the ability to code these assets using another language, or language extension. These include SCSS or Sass for CSS, CoffeeScript for JavaScript, and ERB for both.
|
|
|
|
|
The third feature is the ability to code these assets using another language, or language extension. These include Sass for CSS, CoffeeScript for JavaScript, and ERB for both.
|
|
|
|
|
|
|
|
|
|
h4. What is Fingerprinting and Why Should I Care?
|
|
|
|
|
|
|
|
|
@ -89,10 +89,14 @@ In previous versions of Rails, all assets were located in subdirectories of +pub
|
|
|
|
|
|
|
|
|
|
This is not to say that assets can (or should) no longer be placed in +public+; they still can be and will be served as static files by the application or web server. You would only use +app/assets+ if you wish your files to undergo some pre-processing before they are served.
|
|
|
|
|
|
|
|
|
|
When a scaffold or controller is generated for the application, Rails also generates a JavaScript file (or CoffeeScript file if the +coffee-script+ gem is in the +Gemfile+) and a Cascading Style Sheet file (or SCSS file if +sass-rails+ is in the +Gemfile+) for that controller.
|
|
|
|
|
In production, the default is to precompile these files to +public/assets+ so that they can be more efficiently delivered by the webserver.
|
|
|
|
|
|
|
|
|
|
When a scaffold or controller is generated for the application, Rails also generates a JavaScript file (or CoffeeScript file if the +coffee-rails+ gem is in the +Gemfile+) and a Cascading Style Sheet file (or SCSS file if +sass-rails+ is in the +Gemfile+) for that controller.
|
|
|
|
|
|
|
|
|
|
For example, if a +ProjectsController+ is generated, there will be a new file at +app/assets/javascripts/projects.js.coffee+ and another at +app/assets/stylesheets/projects.css.scss+. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as +<%= javascript_include_tag params[:controller] %>+ or +<%= stylesheet_link_tag params[:controller] %>+.
|
|
|
|
|
|
|
|
|
|
NOTE: You will need a "ExecJS":https://github.com/sstephenson/execjs#readme - supported runtime in order to use CoffeeScript. If you are using Mac OS X or Windows you have a JavaScript runtime installed in your operating system. Check "ExecJS":https://github.com/sstephenson/execjs#readme documentation to know all supported JavaScript runtimes.
|
|
|
|
|
|
|
|
|
|
h4. Asset Organization
|
|
|
|
|
|
|
|
|
|
Assets can be placed inside an application in one of three locations: +app/assets+, +lib/assets+ or +vendor/assets+.
|
|
|
|
@ -103,13 +107,17 @@ Assets can be placed inside an application in one of three locations: +app/asset
|
|
|
|
|
|
|
|
|
|
+vendor/assets+ is for assets that are owned by outside entities, such as code for JavaScript plugins.
|
|
|
|
|
|
|
|
|
|
All subdirectories that exist within these three locations are added to the search path for Sprockets (visible by calling +Rails.application.config.assets.paths+ in a console). When an asset is requested, these paths are looked through to see if they contain an asset matching the name specified. Once an asset has been found, it's processed by Sprockets and served.
|
|
|
|
|
All subdirectories that exist within these three locations are added to the search path for Sprockets (visible by calling +Rails.application.config.assets.paths+ in a console). When an asset is requested, these paths are traversed to see if they contain an asset matching the name specified. Once an asset has been found, it's processed by Sprockets and served.
|
|
|
|
|
|
|
|
|
|
You can add additional (fully qualified) paths to the pipeline in +application.rb+. For example:
|
|
|
|
|
|
|
|
|
|
<erb>
|
|
|
|
|
config.assets.paths << File.join(Rails.root, 'app', 'assets', 'flash')
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
h4. Coding Links to Assets
|
|
|
|
|
|
|
|
|
|
To access assets, you use the same tags that you are generally familiar with:
|
|
|
|
|
|
|
|
|
|
Sprockets does not add any new methods to require your assets, you still use the familiar +javascript_include_tag+ and +stylesheet_link_tag+.
|
|
|
|
|
Sprockets does not add any new methods to access your assets - you still use the familiar +javascript_include_tag+ and +stylesheet_link_tag+.
|
|
|
|
|
|
|
|
|
|
<erb>
|
|
|
|
|
<%= stylesheet_link_tag "application" %>
|
|
|
|
@ -122,26 +130,18 @@ In regular views you can access images in the +assets/images+ directory like thi
|
|
|
|
|
<%= image_tag "rails.png" %>
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
Images can be organized into directories if required, and they can be accessed by specifying the directory's name in the tag:
|
|
|
|
|
Provided that the pipeline is enabled within your application (and not disabled in the current environment context), this file is served by Sprockets. If a file exists at +public/assets/rails.png+ it is served by the webserver.
|
|
|
|
|
|
|
|
|
|
Alternatively, a request for a file with an MD5 hash such as +public/assets/rails-af27b6a414e6da00003503148be9b409.png+ is treated the same way. How these hashes are generated is covered in the "Production Assets":#production_assets section later on in this guide.
|
|
|
|
|
|
|
|
|
|
Sprockets will also look through the paths specified in +config.assets.paths+ which includes the standard application paths and any path added by Rails engines.
|
|
|
|
|
|
|
|
|
|
Images can also be organized into subdirectories if required, and they can be accessed by specifying the directory's name in the tag:
|
|
|
|
|
|
|
|
|
|
<erb>
|
|
|
|
|
<%= image_tag "icons/rails.png" %>
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
Providing that assets are enabled within your application (+config.assets.enabled+ in the current environment's file is not set to +false+), this file is served by Sprockets unless a file at +public/assets/rails.png+ exists, in which case that file is served.
|
|
|
|
|
|
|
|
|
|
Alternatively, a file with an MD5 hash after its name such as +public/assets/rails-af27b6a414e6da00003503148be9b409.png+ is also picked up by Sprockets. How these hashes are generated is covered in the "Production Assets":#production_assets section later on in this guide.
|
|
|
|
|
|
|
|
|
|
Otherwise, Sprockets looks through the available paths until it finds a file that matches the name and then serves it, first looking in the application's assets directories and then falling back to the various engines of the application.
|
|
|
|
|
|
|
|
|
|
If you want to use a "css data URI":http://en.wikipedia.org/wiki/Data_URI_scheme -- a method of embedding the image data directly into the CSS file -- you can use the +asset_data_uri+ helper.
|
|
|
|
|
|
|
|
|
|
<plain>
|
|
|
|
|
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }
|
|
|
|
|
</plain>
|
|
|
|
|
|
|
|
|
|
This inserts a correctly-formatted data URI into the CSS source.
|
|
|
|
|
|
|
|
|
|
h5. CSS and ERB
|
|
|
|
|
|
|
|
|
|
If you add an +erb+ extension to a CSS asset, making it something such as +application.css.erb+, then you can use the +asset_path+ helper in your CSS rules:
|
|
|
|
@ -152,19 +152,27 @@ If you add an +erb+ extension to a CSS asset, making it something such as +appli
|
|
|
|
|
|
|
|
|
|
This writes the path to the particular asset being referenced. In this example, it would make sense to have an image in one of the asset load paths, such as +app/assets/images/image.png+, which would be referenced here. If this image is already available in +public/assets+ as a fingerprinted file, then that path is referenced.
|
|
|
|
|
|
|
|
|
|
If you want to use a "css data URI":http://en.wikipedia.org/wiki/Data_URI_scheme -- a method of embedding the image data directly into the CSS file -- you can use the +asset_data_uri+ helper.
|
|
|
|
|
|
|
|
|
|
<plain>
|
|
|
|
|
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }
|
|
|
|
|
</plain>
|
|
|
|
|
|
|
|
|
|
This inserts a correctly-formatted data URI into the CSS source.
|
|
|
|
|
|
|
|
|
|
Note that the closing tag cannot be of the style +-%>+.
|
|
|
|
|
|
|
|
|
|
h5. CSS and SCSS
|
|
|
|
|
h5. CSS and Sass
|
|
|
|
|
|
|
|
|
|
When using the asset pipeline, paths to assets must be re-written and +sass-rails+ provides +_url+ and +_path+ helpers for the following asset classes: image, font, video, audio, javascript, stylesheet.
|
|
|
|
|
|
|
|
|
|
* +image_url("rails.png")+ becomes +url(/assets/rails.png)+
|
|
|
|
|
* +image_path("rails.png")+ becomes +"/assets/rails.png"+.
|
|
|
|
|
* +image-url("rails.png")+ becomes +url(/assets/rails.png)+
|
|
|
|
|
* +image-path("rails.png")+ becomes +"/assets/rails.png"+.
|
|
|
|
|
|
|
|
|
|
The more generic form can also be used but the asset path and class must both be specified:
|
|
|
|
|
|
|
|
|
|
* +asset_url("rails.png", "image")+ becomes +url(/assets/rails.png)+
|
|
|
|
|
* +asset_path("rails.png", "image")+ becomes +"/assets/rails.png"+
|
|
|
|
|
* +asset-url("rails.png", image)+ becomes +url(/assets/rails.png)+
|
|
|
|
|
* +asset-path("rails.png", image)+ becomes +"/assets/rails.png"+
|
|
|
|
|
|
|
|
|
|
h4. Manifest Files and Directives
|
|
|
|
|
|
|
|
|
@ -222,59 +230,89 @@ Keep in mind that the order of these pre-processors is important. For example, i
|
|
|
|
|
|
|
|
|
|
h3. In Development
|
|
|
|
|
|
|
|
|
|
In the development environment assets are compiled and cached on the first request after the server is started. Sprockets sets a +must-validate+ Cache-Control HTTP header to reduce request overhead on subsequent requests - on these the browser gets a 304 (not-modified) response.
|
|
|
|
|
In development mode assets are served as separate files in the order they are specified in the manifest file.
|
|
|
|
|
|
|
|
|
|
This manifest +application.js+:
|
|
|
|
|
|
|
|
|
|
<plain>
|
|
|
|
|
//= require core
|
|
|
|
|
//= require projects
|
|
|
|
|
//= require tickets
|
|
|
|
|
</plain>
|
|
|
|
|
|
|
|
|
|
would generate this HTML:
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<script src='/assets/core.js?body=1'></script>
|
|
|
|
|
<script src='/assets/projects.js?body=1'></script>
|
|
|
|
|
<script src='/assets/tickets.js?body=1'></script>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
The +body+ param is required by Sprockets.
|
|
|
|
|
|
|
|
|
|
h4. Turning Debugging off
|
|
|
|
|
|
|
|
|
|
You can turn off debug mode by updating +development.rb+ to include:
|
|
|
|
|
|
|
|
|
|
<erb>
|
|
|
|
|
config.assets.debug = false
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
When debug mode is off Sprockets will concatenate and run the necessary preprocessors on all files, generating the following HTML:
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<script src='/assets/application.js'></script>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
Assets are compiled and cached on the first request after the server is started. Sprockets sets a +must-validate+ Cache-Control HTTP header to reduce request overhead on subsequent requests -- on these the browser gets a 304 (not-modified) response.
|
|
|
|
|
|
|
|
|
|
If any of the files in the manifest have changed between requests, the server responds with a new compiled file.
|
|
|
|
|
|
|
|
|
|
h4. Debugging Assets
|
|
|
|
|
You can put +?debug_assets=true+ or +?debug_assets=1+ at the end of a URL to enable debug mode on-demand, and this will render individual tags for each file. This is useful for tracking down exact line numbers when debugging.
|
|
|
|
|
|
|
|
|
|
You can put +?debug_assets=true+ or +?debug_assets=1+ at the end of a URL or set +config.assets.debug+ and Sprockets expands the lines which load the assets. For example, if you had an +app/assets/javascripts/application.js+ file containing these lines:
|
|
|
|
|
Debug can also be set in the Rails helper methods:
|
|
|
|
|
|
|
|
|
|
<plain>
|
|
|
|
|
//= require "projects"
|
|
|
|
|
//= require "tickets"
|
|
|
|
|
</plain>
|
|
|
|
|
<erb>
|
|
|
|
|
<%= stylesheet_link_tag "application", :debug => true %>
|
|
|
|
|
<%= javascript_include_tag "application", :debug => true %>
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
By default, this only renders this line when used with +<%= javascript_include_tag "application" %>+ in a view or layout:
|
|
|
|
|
The +:debug+ option is ignored if the debug mode is off.
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<script src='/assets/application.js'></script>
|
|
|
|
|
</html>
|
|
|
|
|
You could potentially also enable compression in development mode as a sanity check, and disable it on-demand as required for debugging.
|
|
|
|
|
|
|
|
|
|
When the +debug_assets+ parameter is set, this line is expanded out into three separate lines, separating out the combined file into their parts.
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<script src='/assets/application.js'></script>
|
|
|
|
|
<script src='/assets/projects.js'></script>
|
|
|
|
|
<script src='/assets/tickets.js'></script>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
This allows the individual parts of an asset to be rendered and debugged separately.
|
|
|
|
|
|
|
|
|
|
NOTE. Assets debugging is turned on by default in development and test environments.
|
|
|
|
|
|
|
|
|
|
h3. In Production
|
|
|
|
|
|
|
|
|
|
In the production environment, assets are served slightly differently.
|
|
|
|
|
In the production environment Rails uses the fingerprinting scheme outlined above. By default it is assumed that assets have been precompiled and will be served as static assets by your web server.
|
|
|
|
|
|
|
|
|
|
On the first request the assets are compiled and cached as described above, however the manifest names are altered to include an MD5 hash. Files names typically look like these:
|
|
|
|
|
During the precompilation phase an MD5 is generated from the contents of the compiled files, and inserted into the filenames as they are written to disc. These fingerprinted names are used by the Rails helpers in place of the manifest name.
|
|
|
|
|
|
|
|
|
|
<plain>
|
|
|
|
|
/assets/application-908e25f4bf641868d8683022a5b62f54.js
|
|
|
|
|
/assets/application-4dd5b109ee3439da54f5bdfd78a80473.css
|
|
|
|
|
</plain>
|
|
|
|
|
For example this:
|
|
|
|
|
|
|
|
|
|
The MD5 is generated from the contents of the compiled files, and is included in the HTTP +Content-MD5+ header.
|
|
|
|
|
<erb>
|
|
|
|
|
<%= javascript_include_tag "application" %>
|
|
|
|
|
<%= stylesheet_link_tag "application" %>
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
Sprockets also sets the +Cache-Control+ HTTP header to +max-age=31536000+. This signals all caches between your server and the client browser that this content (the file served) can be cached for 1 year. The effect of this is to reduce the number of requests for this asset from your server; the asset has a good chance of being in the local browser cache or some intermediate cache.
|
|
|
|
|
generates something like this:
|
|
|
|
|
|
|
|
|
|
This behavior is controlled by the setting of +config.assets.digest+ setting in Rails (which is +true+ for production, +false+ for everything else).
|
|
|
|
|
<html>
|
|
|
|
|
<script src="/assets/application-908e25f4bf641868d8683022a5b62f54.js" type="text/javascript"></script>
|
|
|
|
|
<link href="/assets/application-4dd5b109ee3439da54f5bdfd78a80473.css" media="screen" rel="stylesheet" type="text/css" />
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
The fingerprinting behavior is controlled by the setting of +config.assets.digest+ setting in Rails (which is +true+ for production, +false+ for everything else).
|
|
|
|
|
|
|
|
|
|
NOTE: Under normal circumstances the default option should not be changed. If there are no digests in the filenames, and far-future headers are set, remote clients will never know to refetch the files when their content changes.
|
|
|
|
|
|
|
|
|
|
h4. Precompiling Assets
|
|
|
|
|
|
|
|
|
|
Even though assets are served by Rack::Cache with far-future headers, in high traffic sites this may not be fast enough.
|
|
|
|
|
Rails comes bundled with a rake task to compile the asset manifests and other files in the pipeline to disc.
|
|
|
|
|
|
|
|
|
|
Rails comes bundled with a rake task to compile the manifests to files on disc. These are located in the +public/assets+ directory where they are served by your web server instead of the Rails application.
|
|
|
|
|
Compiled assets are written to the location specified in +config.assets.prefix+. The default setting will use the +public/assets+ directory.
|
|
|
|
|
|
|
|
|
|
You must use this task either during deployment or locally if you do not have write access to your production filesystem.
|
|
|
|
|
|
|
|
|
|
The rake task is:
|
|
|
|
|
|
|
|
|
@ -288,7 +326,7 @@ Capistrano (v2.8.0+) has a recipe to handle this in deployment. Add the followin
|
|
|
|
|
load 'deploy/assets'
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
This links the folder specified in +config.assets.prefix+ to +shared/assets+. If you already use this folder you'll need to write your own deployment task.
|
|
|
|
|
This links the folder specified in +config.assets.prefix+ to +shared/assets+. If you already use this shared folder you'll need to write your own deployment task.
|
|
|
|
|
|
|
|
|
|
It is important that this folder is shared between deployments so that remotely cached pages that reference the old compiled assets still work for the life of the cached page.
|
|
|
|
|
|
|
|
|
@ -298,13 +336,13 @@ The default matcher for compiling files includes +application.js+, +application.
|
|
|
|
|
[ /\w+\.(?!js|css).+/, /application.(css|js)$/ ]
|
|
|
|
|
</ruby>
|
|
|
|
|
|
|
|
|
|
If you have other manifests or individual stylesheets and JavaScript files to include, you can append them to the +precompile+ array:
|
|
|
|
|
If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the +precompile+ array:
|
|
|
|
|
|
|
|
|
|
<erb>
|
|
|
|
|
config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
The rake task also generates a +manifest.yml+ that contains a list with all your assets and their fingerprints, using this manifest file the assets helpers avoid hitting to Sprockets to recalculate MD5 hashes for files. Manifest file typically look like this:
|
|
|
|
|
The rake task also generates a +manifest.yml+ that contains a list with all your assets and their respective fingerprints. This is used by the Rails helper methods and avoids handing the mapping requests back to Sprockets. Manifest file typically look like this:
|
|
|
|
|
|
|
|
|
|
<plain>
|
|
|
|
|
---
|
|
|
|
@ -315,8 +353,17 @@ application.js: application-3fdab497b8fb70d20cfc5495239dfc29.js
|
|
|
|
|
application.css: application-8af74128f904600e41a6e39241464e03.css
|
|
|
|
|
</plain>
|
|
|
|
|
|
|
|
|
|
The manifest file is generated by default in same folder of your precompiled assets, you can change the location of the file setting the +config.assets.manifest+ option with the full path of the folder where you want save it.
|
|
|
|
|
The default location for the manifest is the root of the location specified in +config.assets.prefix+ ('/assets' by default).
|
|
|
|
|
|
|
|
|
|
This can be changed with the +config.assets.manifest+ option. A fully specified path is required:
|
|
|
|
|
|
|
|
|
|
<erb>
|
|
|
|
|
config.assets.manifest = '/path/to/some/other/location'
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
NOTE: If there are missing precompiled files in production you will get an "AssetNoPrecompiledError" exception indicating the name of the missing file.
|
|
|
|
|
|
|
|
|
|
h5. Server Configuration
|
|
|
|
|
|
|
|
|
|
Precompiled assets exist on the filesystem and are served directly by your webserver. They do not have far-future headers by default, so to get the benefit of fingerprinting you'll have to update your server configuration to add them.
|
|
|
|
|
|
|
|
|
@ -338,7 +385,7 @@ For Apache:
|
|
|
|
|
|
|
|
|
|
TODO: nginx instructions
|
|
|
|
|
|
|
|
|
|
When files are precompiled, Sprockets also creates a "Gzip":http://en.wikipedia.org/wiki/Gzip (.gz) version of your assets. This avoids the server having to do this for any requests; it can simply read the compressed files from disc. You must configure your server to use gzip compression and serve the compressed assets that will be stored in the public/assets folder. The following configuration options can be used:
|
|
|
|
|
When files are precompiled, Sprockets also creates a "Gzip":http://en.wikipedia.org/wiki/Gzip (.gz) version of your assets. This avoids the server having to do this for any requests; it can simply read the compressed files from disc. You must configure your server to use gzip compression and serve the compressed assets that will be stored in the +public/assets+ folder. The following configuration options can be used:
|
|
|
|
|
|
|
|
|
|
For Apache:
|
|
|
|
|
|
|
|
|
@ -347,7 +394,7 @@ For Apache:
|
|
|
|
|
# 2 lines to serve pre-gzipped version
|
|
|
|
|
RewriteCond %{REQUEST_FILENAME}.gz -s
|
|
|
|
|
RewriteRule ^(.+) $1.gz [L]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# without it, Content-Type will be "application/x-gzip"
|
|
|
|
|
<FilesMatch .*\.css.gz>
|
|
|
|
|
ForceType text/css
|
|
|
|
@ -370,14 +417,27 @@ location ~ ^/(assets)/ {
|
|
|
|
|
}
|
|
|
|
|
</plain>
|
|
|
|
|
|
|
|
|
|
By default Rails assumes that you have your files precompiled in the production environment, if you want use live compiling (compile your assets during runtime) in production you must set the +config.assets.compile+ to true. You can use this option to fallback to Sprockets when you are using precompiled assets but there are any missing precompiled files. If +config.assets.compile+ option is set to false and there are missing precompiled files you will get an "AssetNoPrecompiledError" indicating the name of the missing file.
|
|
|
|
|
h4. Live Compilation
|
|
|
|
|
|
|
|
|
|
In some circumstances you may wish to use live compilation. In this mode all requests for assets in the Pipeline are handled by Sprockets directly.
|
|
|
|
|
|
|
|
|
|
To enable this option set:
|
|
|
|
|
|
|
|
|
|
<erb>
|
|
|
|
|
config.assets.compile = true
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
On the first request the assets are compiled and cached as outlined in development above, and the manifest names used in the helpers are altered to include the MD5 hash.
|
|
|
|
|
|
|
|
|
|
Sprockets also sets the +Cache-Control+ HTTP header to +max-age=31536000+. This signals all caches between your server and the client browser that this content (the file served) can be cached for 1 year. The effect of this is to reduce the number of requests for this asset from your server; the asset has a good chance of being in the local browser cache or some intermediate cache.
|
|
|
|
|
|
|
|
|
|
This mode uses more memory and is lower performance than the default. It is not recommended.
|
|
|
|
|
|
|
|
|
|
h3. Customizing the Pipeline
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
h4. CSS Compression
|
|
|
|
|
|
|
|
|
|
There is currently one option for compressing CSS - YUI. This Gem extends the CSS syntax and offers minification.
|
|
|
|
|
There is currently one option for compressing CSS, YUI. This Gem extends the CSS syntax and offers minification.
|
|
|
|
|
|
|
|
|
|
The following line enables YUI compression, and requires the +yui-compressor+ gem.
|
|
|
|
|
|
|
|
|
@ -387,7 +447,7 @@ config.assets.css_compressor = :yui
|
|
|
|
|
|
|
|
|
|
The +config.assets.compress+ must be set to +true+ to enable CSS compression
|
|
|
|
|
|
|
|
|
|
h4. JavaScript
|
|
|
|
|
h4. JavaScript Compression
|
|
|
|
|
|
|
|
|
|
Possible options for JavaScript compression are +:closure+, +:uglifier+ and +:yui+. These require the use of the +closure-compiler+, +uglifier+ or +yui-compressor+ gems respectively.
|
|
|
|
|
|
|
|
|
@ -401,6 +461,8 @@ config.assets.js_compressor = :uglifier
|
|
|
|
|
|
|
|
|
|
The +config.assets.compress+ must be set to +true+ to enable JavaScript compression
|
|
|
|
|
|
|
|
|
|
NOTE: You will need a "ExecJS":https://github.com/sstephenson/execjs#readme -- supported runtime in order to use +uglifier+. If you are using Mac OS X or Windows you have installed a JavaScript runtime in your operating system. Check "ExecJS":https://github.com/sstephenson/execjs#readme documentation to know all supported JavaScript runtimes.
|
|
|
|
|
|
|
|
|
|
h4. Using Your Own Compressor
|
|
|
|
|
|
|
|
|
|
The compressor config settings for CSS and JavaScript also take any Object. This object must have a +compress+ method that takes a string as the sole argument and it must return a string.
|
|
|
|
@ -447,7 +509,7 @@ WARNING: If you are upgrading an existing application and intend to use this opt
|
|
|
|
|
|
|
|
|
|
h3. How Caching Works
|
|
|
|
|
|
|
|
|
|
Sprockets uses the default rails cache store to cache assets in dev and production. The only difference is file names are fingerprinted and get far-future headers in production.
|
|
|
|
|
Sprockets uses the default rails cache store to cache assets in development and production.
|
|
|
|
|
|
|
|
|
|
TODO: Add more about changing the default store.
|
|
|
|
|
|
|
|
|
@ -463,7 +525,7 @@ TODO: Registering gems on "Tilt":https://github.com/rtomayko/tilt enabling Sproc
|
|
|
|
|
|
|
|
|
|
h3. Upgrading from Old Versions of Rails
|
|
|
|
|
|
|
|
|
|
There are two issues when upgrading. The first is moving the files to the new locations. See the section above for guidance on the correct locations for different file types.
|
|
|
|
|
There are two issues when upgrading. The first is moving the files to the new locations. See the section above for guidance on the correct locations for different file types.
|
|
|
|
|
|
|
|
|
|
The second is updating the various environment files with the correct default options. The following changes reflect the defaults in version 3.1.0.
|
|
|
|
|
|
|
|
|
@ -475,6 +537,10 @@ config.assets.enabled = true
|
|
|
|
|
|
|
|
|
|
# Version of your assets, change this if you want to expire all your assets
|
|
|
|
|
config.assets.version = '1.0'
|
|
|
|
|
|
|
|
|
|
# Change the path that assets are served from
|
|
|
|
|
# config.assets.prefix = "/assets"
|
|
|
|
|
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
In +development.rb+:
|
|
|
|
@ -493,10 +559,14 @@ And in +production.rb+:
|
|
|
|
|
# Compress JavaScripts and CSS
|
|
|
|
|
config.assets.compress = true
|
|
|
|
|
|
|
|
|
|
# Choose the compressors to use
|
|
|
|
|
# config.assets.js_compressor = :uglifier
|
|
|
|
|
# config.assets.css_compressor = :yui
|
|
|
|
|
|
|
|
|
|
# Don't fallback to assets pipeline if a precompiled asset is missed
|
|
|
|
|
config.assets.compile = false
|
|
|
|
|
|
|
|
|
|
# Generate digests for assets URLs
|
|
|
|
|
# Generate digests for assets URLs.
|
|
|
|
|
config.assets.digest = true
|
|
|
|
|
|
|
|
|
|
# Defaults to Rails.root.join("public/assets")
|
|
|
|
@ -506,4 +576,17 @@ config.assets.digest = true
|
|
|
|
|
# config.assets.precompile += %w( search.js )
|
|
|
|
|
</erb>
|
|
|
|
|
|
|
|
|
|
There are no changes to +test.rb+.
|
|
|
|
|
There are no changes to +test.rb+. The defaults in the test environment are: +config.assets.compile+ is true and +config.assets.compress+, +config.assets.debug+ and +config.assets.digest+ are false.
|
|
|
|
|
|
|
|
|
|
The following should also be added to +Gemfile+:
|
|
|
|
|
|
|
|
|
|
<plain>
|
|
|
|
|
# Gems used only for assets and not required
|
|
|
|
|
# in production environments by default.
|
|
|
|
|
group :assets do
|
|
|
|
|
gem 'sass-rails', " ~> 3.1.0"
|
|
|
|
|
gem 'coffee-rails', "~> 3.1.0"
|
|
|
|
|
gem 'uglifier'
|
|
|
|
|
end
|
|
|
|
|
</plain>
|
|
|
|
|
|
|
|
|
|