sprockets 3.0.0 → 4.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/CHANGELOG.md +76 -0
- data/README.md +426 -404
- data/bin/sprockets +12 -7
- data/lib/rake/sprocketstask.rb +3 -2
- data/lib/sprockets/add_source_map_comment_to_asset_processor.rb +60 -0
- data/lib/sprockets/asset.rb +33 -24
- data/lib/sprockets/autoload/babel.rb +8 -0
- data/lib/sprockets/autoload/closure.rb +1 -0
- data/lib/sprockets/autoload/coffee_script.rb +1 -0
- data/lib/sprockets/autoload/eco.rb +1 -0
- data/lib/sprockets/autoload/ejs.rb +1 -0
- data/lib/sprockets/autoload/jsminc.rb +8 -0
- data/lib/sprockets/autoload/sass.rb +1 -0
- data/lib/sprockets/autoload/sassc.rb +8 -0
- data/lib/sprockets/autoload/uglifier.rb +1 -0
- data/lib/sprockets/autoload/yui.rb +1 -0
- data/lib/sprockets/autoload/zopfli.rb +7 -0
- data/lib/sprockets/autoload.rb +5 -0
- data/lib/sprockets/babel_processor.rb +66 -0
- data/lib/sprockets/base.rb +61 -13
- data/lib/sprockets/bower.rb +5 -2
- data/lib/sprockets/bundle.rb +44 -4
- data/lib/sprockets/cache/file_store.rb +32 -7
- data/lib/sprockets/cache/memory_store.rb +9 -0
- data/lib/sprockets/cache/null_store.rb +8 -0
- data/lib/sprockets/cache.rb +42 -5
- data/lib/sprockets/cached_environment.rb +14 -19
- data/lib/sprockets/closure_compressor.rb +6 -11
- data/lib/sprockets/coffee_script_processor.rb +19 -5
- data/lib/sprockets/compressing.rb +62 -2
- data/lib/sprockets/configuration.rb +3 -7
- data/lib/sprockets/context.rb +98 -23
- data/lib/sprockets/dependencies.rb +9 -8
- data/lib/sprockets/digest_utils.rb +104 -60
- data/lib/sprockets/directive_processor.rb +45 -35
- data/lib/sprockets/eco_processor.rb +3 -2
- data/lib/sprockets/ejs_processor.rb +3 -2
- data/lib/sprockets/encoding_utils.rb +8 -4
- data/lib/sprockets/environment.rb +9 -4
- data/lib/sprockets/erb_processor.rb +28 -21
- data/lib/sprockets/errors.rb +1 -1
- data/lib/sprockets/exporters/base.rb +71 -0
- data/lib/sprockets/exporters/file_exporter.rb +24 -0
- data/lib/sprockets/exporters/zlib_exporter.rb +33 -0
- data/lib/sprockets/exporters/zopfli_exporter.rb +14 -0
- data/lib/sprockets/exporting.rb +73 -0
- data/lib/sprockets/file_reader.rb +1 -0
- data/lib/sprockets/http_utils.rb +26 -6
- data/lib/sprockets/jsminc_compressor.rb +32 -0
- data/lib/sprockets/jst_processor.rb +11 -10
- data/lib/sprockets/loader.rb +239 -70
- data/lib/sprockets/manifest.rb +97 -44
- data/lib/sprockets/manifest_utils.rb +9 -6
- data/lib/sprockets/mime.rb +8 -42
- data/lib/sprockets/npm.rb +52 -0
- data/lib/sprockets/path_dependency_utils.rb +3 -11
- data/lib/sprockets/path_digest_utils.rb +2 -1
- data/lib/sprockets/path_utils.rb +106 -21
- data/lib/sprockets/paths.rb +1 -0
- data/lib/sprockets/preprocessors/default_source_map.rb +49 -0
- data/lib/sprockets/processing.rb +31 -51
- data/lib/sprockets/processor_utils.rb +81 -15
- data/lib/sprockets/resolve.rb +182 -95
- data/lib/sprockets/sass_cache_store.rb +1 -0
- data/lib/sprockets/sass_compressor.rb +21 -17
- data/lib/sprockets/sass_functions.rb +1 -0
- data/lib/sprockets/sass_importer.rb +1 -0
- data/lib/sprockets/sass_processor.rb +45 -17
- data/lib/sprockets/sassc_compressor.rb +56 -0
- data/lib/sprockets/sassc_processor.rb +297 -0
- data/lib/sprockets/server.rb +57 -34
- data/lib/sprockets/source_map_processor.rb +66 -0
- data/lib/sprockets/source_map_utils.rb +483 -0
- data/lib/sprockets/transformers.rb +63 -35
- data/lib/sprockets/uglifier_compressor.rb +23 -20
- data/lib/sprockets/unloaded_asset.rb +139 -0
- data/lib/sprockets/uri_tar.rb +99 -0
- data/lib/sprockets/uri_utils.rb +15 -14
- data/lib/sprockets/utils/gzip.rb +99 -0
- data/lib/sprockets/utils.rb +43 -59
- data/lib/sprockets/version.rb +2 -1
- data/lib/sprockets/yui_compressor.rb +5 -14
- data/lib/sprockets.rb +103 -33
- metadata +151 -22
- data/LICENSE +0 -21
- data/lib/sprockets/coffee_script_template.rb +0 -6
- data/lib/sprockets/eco_template.rb +0 -6
- data/lib/sprockets/ejs_template.rb +0 -6
- data/lib/sprockets/engines.rb +0 -81
- data/lib/sprockets/erb_template.rb +0 -6
- data/lib/sprockets/legacy.rb +0 -314
- data/lib/sprockets/legacy_proc_processor.rb +0 -35
- data/lib/sprockets/legacy_tilt_processor.rb +0 -29
- data/lib/sprockets/sass_template.rb +0 -7
data/README.md
CHANGED
@@ -5,7 +5,6 @@ It features declarative dependency management for JavaScript and CSS
|
|
5
5
|
assets, as well as a powerful preprocessor pipeline that allows you to
|
6
6
|
write assets in languages like CoffeeScript, Sass and SCSS.
|
7
7
|
|
8
|
-
|
9
8
|
## Installation
|
10
9
|
|
11
10
|
Install Sprockets from RubyGems:
|
@@ -17,62 +16,37 @@ $ gem install sprockets
|
|
17
16
|
Or include it in your project's `Gemfile` with Bundler:
|
18
17
|
|
19
18
|
``` ruby
|
20
|
-
gem 'sprockets', '~>
|
19
|
+
gem 'sprockets', '~> 4.0'
|
21
20
|
```
|
22
21
|
|
22
|
+
## Upgrading to Sprockets 4.x
|
23
23
|
|
24
|
-
|
25
|
-
|
26
|
-
You'll need an instance of the `Sprockets::Environment` class to
|
27
|
-
access and serve assets from your application. Under Rails 4.0 and
|
28
|
-
later, `YourApp::Application.assets` is a preconfigured
|
29
|
-
`Sprockets::Environment` instance. For Rack-based applications, create
|
30
|
-
an instance in `config.ru`.
|
31
|
-
|
32
|
-
The Sprockets `Environment` has methods for retrieving and serving
|
33
|
-
assets, manipulating the load path, and registering processors. It is
|
34
|
-
also a Rack application that can be mounted at a URL to serve assets
|
35
|
-
over HTTP.
|
24
|
+
These are the major features in Sprockets 4.x
|
36
25
|
|
37
|
-
|
26
|
+
- Source Maps
|
27
|
+
- Manifest.js
|
28
|
+
- ES6 support
|
29
|
+
- Deprecated processor interface in 3.x is removed in 4.x
|
38
30
|
|
39
|
-
|
40
|
-
to search for assets.
|
31
|
+
Read more about them by referencing [Upgrading document](UPGRADING.md)
|
41
32
|
|
42
|
-
|
43
|
-
of a single directory containing your application's asset source
|
44
|
-
files. When mounted, the environment will serve assets from this
|
45
|
-
directory as if they were static files in your public root.
|
33
|
+
## Guides
|
46
34
|
|
47
|
-
|
48
|
-
files into multiple directories -- even directories that live outside
|
49
|
-
your application -- and combine those directories into a single
|
50
|
-
virtual filesystem. That means you can easily bundle JavaScript, CSS
|
51
|
-
and images into a Ruby library or [Bower](http://bower.io) package and import them into your application.
|
35
|
+
For most people interested in using Sprockets, you will want to see the README below.
|
52
36
|
|
53
|
-
|
37
|
+
If you are a framework developer that is using Sprockets, see [Building an Asset Processing Framework](guides/building_an_asset_processing_framework.md).
|
54
38
|
|
55
|
-
|
56
|
-
`append_path` and `prepend_path` methods. Directories at the beginning
|
57
|
-
of the load path have precedence over subsequent directories.
|
39
|
+
If you are a library developer who is extending the functionality of Sprockets, see [Extending Sprockets](guides/extending_sprockets.md).
|
58
40
|
|
59
|
-
|
60
|
-
environment = Sprockets::Environment.new
|
61
|
-
environment.append_path 'app/assets/javascripts'
|
62
|
-
environment.append_path 'lib/assets/javascripts'
|
63
|
-
environment.append_path 'vendor/assets/bower_components'
|
64
|
-
```
|
41
|
+
If you want to work on Sprockets or better understand how it works read [How Sprockets Works](guides/how_sprockets_works.md)
|
65
42
|
|
66
|
-
|
67
|
-
prepending for cases where you need to override existing assets.
|
43
|
+
## Behavior Overview
|
68
44
|
|
69
|
-
|
45
|
+
You can interact with Sprockets primarily through directives and file extensions. This section covers how to use each of these things, and the defaults that ship with Sprockets.
|
70
46
|
|
71
|
-
|
72
|
-
environment as a Rack server and request assets via HTTP. You can also
|
73
|
-
access assets programmatically from within your application.
|
47
|
+
Since you are likely using Sprockets through another framework (such as the [the Rails asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html)), there will be configuration options you can toggle that will change behavior such as what directories or files get compiled. For that documentation you should see your framework's documentation.
|
74
48
|
|
75
|
-
####
|
49
|
+
#### Accessing Assets
|
76
50
|
|
77
51
|
Assets in Sprockets are always referenced by their *logical path*.
|
78
52
|
|
@@ -82,562 +56,610 @@ contains the directory `app/assets/javascripts`:
|
|
82
56
|
|
83
57
|
<table>
|
84
58
|
<tr>
|
85
|
-
<th>Asset source file</th>
|
86
59
|
<th>Logical path</th>
|
60
|
+
<th>Source file on disk</th>
|
87
61
|
</tr>
|
88
62
|
<tr>
|
89
|
-
<td>app/assets/javascripts/application.js</td>
|
90
63
|
<td>application.js</td>
|
64
|
+
<td>app/assets/javascripts/application.js</td>
|
91
65
|
</tr>
|
92
66
|
<tr>
|
93
|
-
<td>app/assets/javascripts/models/project.js</td>
|
94
67
|
<td>models/project.js</td>
|
68
|
+
<td>app/assets/javascripts/models/project.js</td>
|
69
|
+
</tr>
|
70
|
+
<tr>
|
71
|
+
<td>hello.js</td>
|
72
|
+
<td>app/assets/javascripts/hello.coffee</td>
|
95
73
|
</tr>
|
96
74
|
</table>
|
97
75
|
|
98
|
-
|
99
|
-
virtual filesystem whose entries are logical paths.
|
76
|
+
> Note: For assets that are compiled or transpiled, you want to specify the extension that you want, not the extension on disk. For example we specified `hello.js` even if the file on disk is a coffeescript file, since the asset it will generate is javascript.
|
100
77
|
|
101
|
-
|
78
|
+
### Directives
|
102
79
|
|
103
|
-
|
104
|
-
logical paths underneath the *mount point*. For example, if you mount
|
105
|
-
your environment at `/assets` and request the URL
|
106
|
-
`/assets/application.js`, Sprockets will search your load path for the
|
107
|
-
file named `application.js` and serve it.
|
80
|
+
Directives are special comments in your asset file and the main way of interacting with processors. What kind of interactions? You can use these directives to tell Sprockets to load other files, or specify dependencies on other assets.
|
108
81
|
|
109
|
-
|
110
|
-
mounted at `/assets`. If you are using Sprockets with a Rack
|
111
|
-
application, you will need to mount the environment yourself. A good
|
112
|
-
way to do this is with the `map` method in `config.ru`:
|
82
|
+
For example, let's say you have custom JavaScript that you've written. You put this javascript in a file called `beta.js`. The javascript makes heavy use of jQuery, so you need to load that before your code executes. You could add a `require` directive to the top of `beta.js`:
|
113
83
|
|
114
|
-
```
|
115
|
-
require
|
116
|
-
map '/assets' do
|
117
|
-
environment = Sprockets::Environment.new
|
118
|
-
environment.append_path 'app/assets/javascripts'
|
119
|
-
environment.append_path 'app/assets/stylesheets'
|
120
|
-
run environment
|
121
|
-
end
|
84
|
+
```js
|
85
|
+
//= require jquery
|
122
86
|
|
123
|
-
|
124
|
-
|
125
|
-
|
87
|
+
$().ready({
|
88
|
+
// my custom code here
|
89
|
+
})
|
126
90
|
```
|
127
91
|
|
128
|
-
|
92
|
+
The directive processor understands comment blocks in three formats:
|
129
93
|
|
130
|
-
|
131
|
-
|
132
|
-
|
94
|
+
``` css
|
95
|
+
/* Multi-line comment blocks (CSS, SCSS, JavaScript)
|
96
|
+
*= require foo
|
97
|
+
*/
|
98
|
+
```
|
133
99
|
|
134
|
-
```
|
135
|
-
|
136
|
-
|
100
|
+
``` js
|
101
|
+
// Single-line comment blocks (SCSS, JavaScript)
|
102
|
+
//= require foo
|
103
|
+
```
|
104
|
+
|
105
|
+
``` coffee
|
106
|
+
# Single-line comment blocks (CoffeeScript)
|
107
|
+
#= require foo
|
137
108
|
```
|
138
109
|
|
139
|
-
|
140
|
-
get its length in bytes, `mtime` to query its last-modified time, and
|
141
|
-
`filename` to get its full path on the filesystem.
|
110
|
+
> Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the "header" of the document it will not do anything, and won't raise any errors.
|
142
111
|
|
112
|
+
Here is a list of the available directives:
|
143
113
|
|
144
|
-
|
114
|
+
- [`require`](#require) - Add the contents of a file to current
|
115
|
+
- [`require_self`](#require_self) - Change order of where current contents are concatenated to current
|
116
|
+
- [`require_directory`](#require_directory) - Add contents of each file in a folder to current
|
117
|
+
- [`require_tree`](#require_tree) - Add contents of all files in all directories in a path to current
|
118
|
+
- [`link`](#link) - Make target file compile and be publicly available without adding contents to current
|
119
|
+
- [`link_directory`](#link_directory) - Make target directory compile and be publicly available without adding contents to current
|
120
|
+
- [`link_tree`](#link_tree) - Make target tree compile and be publicly available without adding contents to current
|
121
|
+
- [`depend_on`](#depend_on) - Recompile current file if target has changed
|
122
|
+
- [`stub`](#stub) - Ignore target file
|
145
123
|
|
146
|
-
|
147
|
-
CoffeeScript, and automatically compiled to CSS or JavaScript by
|
148
|
-
Sprockets. Processors that convert a file from one format to another are called *transformers*.
|
124
|
+
You can see what each of these does below.
|
149
125
|
|
150
|
-
###
|
126
|
+
### Specifying Processors through File Extensions
|
151
127
|
|
152
|
-
|
128
|
+
Sprockets uses the filename extensions to determine what processors to run on your file and in what order. For example if you have a file:
|
153
129
|
|
154
|
-
```
|
155
|
-
|
156
|
-
environment.css_compressor = :scss
|
130
|
+
```
|
131
|
+
application.scss
|
157
132
|
```
|
158
133
|
|
159
|
-
|
134
|
+
Then Sprockets will by default run the sass processor (which implements scss). The output file will be converted to css.
|
160
135
|
|
161
|
-
[
|
162
|
-
adds features like nested rules, variables, mixins and selector
|
163
|
-
inheritance.
|
136
|
+
You can specify multiple processors by specifying multiple file extensions. For example you can use Ruby's [ERB template language](#invoking-ruby-with-erb) to embed content in your doc before running the sass processor. To accomplish this you would need to name your file
|
164
137
|
|
165
|
-
|
166
|
-
|
138
|
+
```
|
139
|
+
application.scss.erb
|
140
|
+
```
|
167
141
|
|
168
|
-
|
169
|
-
whitespace-sensitive syntax, use the extension `.sass`. For the
|
170
|
-
new SCSS syntax, use the extension `.scss`.
|
142
|
+
Processors are run from right to left (tail to head), so in the above example the processor associated with `erb` will be run before the processor associated with `scss` extension.
|
171
143
|
|
172
|
-
|
144
|
+
For a description of the processors that Sprockets has by default see the "default processors" section below. Other libraries may register additional processors.
|
173
145
|
|
174
|
-
|
175
|
-
language that compiles to the "good parts" of JavaScript, featuring a
|
176
|
-
cleaner syntax with array comprehensions, classes, and function
|
177
|
-
binding.
|
146
|
+
When "asking" for a compiled file, you always ask for the extension you want. For example if you're using Rails, to get the contents of `application.scss.erb` you would use
|
178
147
|
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
an [ExecJS](https://github.com/rails/execjs)-supported runtime
|
183
|
-
on your system to invoke it.
|
148
|
+
```
|
149
|
+
asset_path("application.css")
|
150
|
+
```
|
184
151
|
|
185
|
-
|
186
|
-
`.coffee`.
|
152
|
+
Sprockets understands that `application.scss.erb` will compile down to a `application.css`. Ask for what you need, not what you have.
|
187
153
|
|
188
|
-
|
154
|
+
If this isn't working like you expect, make sure you didn't typo an extension, and make sure the file is on a "load path" (see framework docs for adding new load paths).
|
189
155
|
|
190
|
-
|
191
|
-
strings or markup. JavaScript templates have the special format
|
192
|
-
extension `.jst` and are compiled to JavaScript functions.
|
156
|
+
## File Order Processing
|
193
157
|
|
194
|
-
|
195
|
-
logical path as a property on the global `JST` object. Invoke a
|
196
|
-
template function to render the template as a string. The resulting
|
197
|
-
string can then be inserted into the DOM.
|
158
|
+
By default files are processed in alphabetical order. This behavior can impact your asset compilation when one asset needs to be loaded before another.
|
198
159
|
|
160
|
+
For example if you have an `application.js` and it loads another directory
|
161
|
+
|
162
|
+
```js
|
163
|
+
//= require_directory my_javascript
|
199
164
|
```
|
200
|
-
<!-- templates/hello.jst.ejs -->
|
201
|
-
<div>Hello, <span><%= name %></span>!</div>
|
202
165
|
|
203
|
-
|
204
|
-
|
205
|
-
|
166
|
+
The files in that directory will be loaded in alphabetical order. If the directory looks like this:
|
167
|
+
|
168
|
+
```sh
|
169
|
+
$ ls -1 my_javascript/
|
170
|
+
|
171
|
+
alpha.js
|
172
|
+
beta.js
|
173
|
+
jquery.js
|
206
174
|
```
|
207
175
|
|
208
|
-
|
209
|
-
[EJS](https://github.com/sstephenson/ruby-ejs), for embedded
|
210
|
-
JavaScript, and [Eco](https://github.com/sstephenson/ruby-eco), for
|
211
|
-
embedded CoffeeScript. Both languages use the familiar `<% … %>`
|
212
|
-
syntax for embedding logic in templates.
|
176
|
+
Then `alpha.js` will be loaded before either of the other two. This can be a problem if `alpha.js` uses jquery. For this reason it is not recommend to use `require_directory` with files that are ordering dependent. You can either require individual files manually:
|
213
177
|
|
214
|
-
|
215
|
-
|
178
|
+
```js
|
179
|
+
//= require jquery
|
180
|
+
//= require alpha
|
181
|
+
//= require beta
|
182
|
+
```
|
216
183
|
|
217
|
-
|
218
|
-
templates](https://github.com/sstephenson/eco) in Sprockets. Eco
|
219
|
-
templates have the extension `.jst.eco`. Note that the `eco` gem
|
220
|
-
depends on the CoffeeScript compiler, so the same caveats apply as
|
221
|
-
outlined above for the CoffeeScript engine.
|
184
|
+
Or you can use index files to proxy your folders.
|
222
185
|
|
223
|
-
###
|
186
|
+
### Index files are proxies for folders
|
224
187
|
|
225
|
-
Sprockets
|
226
|
-
embedded Ruby code. Append `.erb` to a CSS or JavaScript asset's
|
227
|
-
filename to enable the ERB engine.
|
188
|
+
In Sprockets index files such as `index.js` or `index.css` files inside of a folder will generate a file with the folder's name. So if you have a `foo/index.js` file it will compile down to `foo.js`. This is similar to NPM's behavior of using [folders as modules](https://nodejs.org/api/modules.html#modules_folders_as_modules). It is also somewhat similar to the way that a file in `public/my_folder/index.html` can be reached by a request to `/my_folder`. This means that you cannot directly use an index file. For example this would not work:
|
228
189
|
|
229
|
-
|
230
|
-
|
231
|
-
|
190
|
+
```erb
|
191
|
+
<%= asset_path("foo/index.js") %>
|
192
|
+
```
|
232
193
|
|
233
|
-
|
234
|
-
`asset_data_uri` helper
|
235
|
-
- inserting the URL to another asset, such as with the `asset_path`
|
236
|
-
helper provided by the Sprockets Rails plugin
|
237
|
-
- embedding other application resources, such as a localized string
|
238
|
-
database, in a JavaScript asset via JSON
|
239
|
-
- embedding version constants loaded from another file
|
194
|
+
Instead you would need to use:
|
240
195
|
|
241
|
-
|
242
|
-
|
196
|
+
```erb
|
197
|
+
<%= asset_path("foo.js") %>
|
198
|
+
```
|
243
199
|
|
200
|
+
Why would you want to use this behavior? It is common behavior where you might want to include an entire directory of files in a top level JavaScript. You can do this in Sprockets using `require_tree .`
|
244
201
|
|
245
|
-
|
202
|
+
```js
|
203
|
+
//= require_tree .
|
204
|
+
```
|
246
205
|
|
247
|
-
|
248
|
-
source files -- by specifying dependencies in a special comment syntax
|
249
|
-
at the top of each source file.
|
206
|
+
This has the problem that files are required alphabetically. If your directory has `jquery-ui.js` and `jquery.min.js` then Sprockets will require `jquery-ui.js` before `jquery` is required which won't work (because jquery-ui depends on jquery). Previously the only way to get the correct ordering would be to rename your files, something like `0-jquery-ui.js`. Instead of doing that you can use an index file.
|
250
207
|
|
251
|
-
|
252
|
-
them to recursively build a dependency graph. When you request an
|
253
|
-
asset with dependencies, the dependencies will be included in order at
|
254
|
-
the top of the file.
|
208
|
+
For example, if you have an `application.js` and want all the files in the `foo/` folder you could do this:
|
255
209
|
|
256
|
-
|
210
|
+
```js
|
211
|
+
//= require foo.js
|
212
|
+
```
|
257
213
|
|
258
|
-
|
259
|
-
source file. The directive processor scans for comment lines beginning
|
260
|
-
with `=` in comment blocks at the top of the file.
|
214
|
+
Then create a file `foo/index.js` that requires all the files in that folder in any order you want using relative references:
|
261
215
|
|
262
|
-
```
|
263
|
-
//= require
|
264
|
-
//= require
|
265
|
-
//= require backbone
|
266
|
-
//= require_tree .
|
216
|
+
```js
|
217
|
+
//= require ./foo.min.js
|
218
|
+
//= require ./foo-ui.js
|
267
219
|
```
|
268
220
|
|
269
|
-
|
270
|
-
name. Any words following the directive name are treated as
|
271
|
-
arguments. Arguments may be placed in single or double quotes if they
|
272
|
-
contain spaces, similar to commands in the Unix shell.
|
221
|
+
Now in your `application.js` will correctly load the `foo.min.js` before `foo-ui.js`. If you used `require_tree` it would not work correctly.
|
273
222
|
|
274
|
-
|
275
|
-
asset, but directive comments are stripped after
|
276
|
-
processing. Sprockets will not look for directives in comment blocks
|
277
|
-
that occur after the first line of code.
|
223
|
+
## Cache
|
278
224
|
|
279
|
-
|
225
|
+
Compiling assets is slow. It requires a lot of disk use to pull assets off of hard drives, a lot of RAM to manipulate those files in memory, and a lot of CPU for compilation operations. Because of this Sprockets has a cache to speed up asset compilation times. That's the good news. The bad news, is that sprockets has a cache and if you've found a bug it's likely going to involve the cache.
|
280
226
|
|
281
|
-
|
227
|
+
By default Sprockets uses the file system to cache assets. It makes sense that Sprockets does not want to generate assets that already exist on disk in `public/assets`, what might not be as intuitive is that Sprockets needs to cache "partial" assets.
|
282
228
|
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
229
|
+
For example if you have an `application.js` and it is made up of `a.js`, `b.js`, all the way to `z.js`
|
230
|
+
|
231
|
+
```js
|
232
|
+
//= require a.js
|
233
|
+
//= require b.js
|
234
|
+
# ...
|
235
|
+
//= require z.js
|
287
236
|
```
|
288
237
|
|
289
|
-
|
290
|
-
|
291
|
-
|
238
|
+
The first time this file is compiled the `application.js` output will be written to disk, but also intermediary compiled files for `a.js` etc. will be written to the cache directory (usually `tmp/cache/assets`).
|
239
|
+
|
240
|
+
So, if `b.js` changes it will get recompiled. However instead of having to recompile the other files from `a.js` to `z.js` since they did not change, we can use the prior intermediary files stored in the cached values . If these files were expensive to generate, then this "partial" asset cache strategy can save a lot of time.
|
241
|
+
|
242
|
+
Directives such as `require`, `link`, and `depend_on` tell Sprockets what assets need to be re-compiled when a file changes. Files are considered "fresh" based on their mtime on disk and a combination of cache keys.
|
243
|
+
|
244
|
+
On Rails you can force a "clean" install by clearing the `public/assets` and `tmp/cache/assets` directories.
|
245
|
+
|
246
|
+
|
247
|
+
## Default Directives
|
248
|
+
|
249
|
+
Directives take a path or a path to a file. Paths for directive can be relative to the current file, for example:
|
250
|
+
|
251
|
+
```js
|
252
|
+
//= require ../foo.js
|
292
253
|
```
|
293
254
|
|
294
|
-
|
295
|
-
|
296
|
-
|
255
|
+
This would load the file up one directory and named `foo.js`. However this isn't required if `foo.js` is on one of Sprocket's load paths. You can simply use
|
256
|
+
|
257
|
+
```js
|
258
|
+
//= require foo.js
|
297
259
|
```
|
298
260
|
|
299
|
-
|
261
|
+
Without any prepended dots and sprockets will search for the asset. If the asset is on a sub-path of the load path, you can specify it without using a relative path as well:
|
300
262
|
|
301
|
-
|
302
|
-
|
263
|
+
```js
|
264
|
+
//= require sub/path/foo.js
|
265
|
+
```
|
266
|
+
|
267
|
+
You can also use an absolute path, but this is discouraged unless you know the directory structure of every machine you plan on running code on.
|
303
268
|
|
304
|
-
|
305
|
-
logical path or a relative path. Relative paths begin with `./` and
|
306
|
-
reference files relative to the location of the current file.
|
269
|
+
Below is a section for each of the built in directive types supported by Sprockets.
|
307
270
|
|
308
|
-
|
271
|
+
### require
|
309
272
|
|
310
273
|
`require` *path* inserts the contents of the asset source file
|
311
274
|
specified by *path*. If the file is required multiple times, it will
|
312
275
|
appear in the bundle only once.
|
313
276
|
|
314
|
-
|
277
|
+
**Example:**
|
315
278
|
|
316
|
-
|
317
|
-
format in the directory specified by *path*. Files are required in
|
318
|
-
alphabetical order.
|
279
|
+
If you've got an `a.js`:
|
319
280
|
|
320
|
-
|
281
|
+
```js
|
282
|
+
var a = "A";
|
283
|
+
```
|
321
284
|
|
322
|
-
|
323
|
-
|
324
|
-
|
285
|
+
and a `b.js`;
|
286
|
+
|
287
|
+
```js
|
288
|
+
var b = "B";
|
289
|
+
```
|
325
290
|
|
326
|
-
|
291
|
+
Then you could require both of these in an `application.js`
|
292
|
+
|
293
|
+
```js
|
294
|
+
//= require a.js
|
295
|
+
//= require b.js
|
296
|
+
```
|
297
|
+
|
298
|
+
Which would generate one concatenated file:
|
299
|
+
|
300
|
+
```js
|
301
|
+
var a = "A";
|
302
|
+
var b = "B";
|
303
|
+
```
|
304
|
+
|
305
|
+
### require_self
|
327
306
|
|
328
307
|
`require_self` tells Sprockets to insert the body of the current
|
329
308
|
source file before any subsequent `require` directives.
|
330
309
|
|
331
|
-
|
310
|
+
**Example:**
|
332
311
|
|
333
|
-
|
334
|
-
of subdependencies to automatically be compiled when the asset is written out to
|
335
|
-
disk.
|
312
|
+
If you've got an `a.js`:
|
336
313
|
|
337
|
-
|
338
|
-
|
314
|
+
```js
|
315
|
+
var a = "A";
|
316
|
+
```
|
339
317
|
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
318
|
+
And an `application.js`
|
319
|
+
|
320
|
+
```js
|
321
|
+
//= require_self
|
322
|
+
//= require 'a.js'
|
323
|
+
|
324
|
+
var app_name = "Sprockets";
|
345
325
|
```
|
346
326
|
|
347
|
-
|
348
|
-
automatically be defined for you.
|
327
|
+
Then this will take the contents of `application.js` (that come after the last require) and put them at the beginning of the file:
|
349
328
|
|
350
|
-
```
|
351
|
-
|
352
|
-
|
353
|
-
}
|
329
|
+
```js
|
330
|
+
var app_name = "Sprockets";
|
331
|
+
var a = "A";
|
354
332
|
```
|
355
333
|
|
356
|
-
|
334
|
+
### require_directory
|
357
335
|
|
358
|
-
`
|
359
|
-
|
360
|
-
|
336
|
+
`require_directory` *path* requires all source files of the same
|
337
|
+
format in the directory specified by *path*. Files are required in
|
338
|
+
alphabetical order.
|
361
339
|
|
362
|
-
|
340
|
+
**Example:**
|
363
341
|
|
364
|
-
`
|
365
|
-
recursively reading the file and following the directives found. This is automatically implied if you use `link`, so consider if it just makes sense using `link` instead of `depend_on_asset`.
|
342
|
+
If we've got a directory called `alphabet` with an `a.js` and `b.js` files like before, then our `application.js`
|
366
343
|
|
367
|
-
|
344
|
+
```js
|
345
|
+
//= require_directory alphabet
|
346
|
+
```
|
368
347
|
|
369
|
-
|
370
|
-
The *path* must be a valid asset and may or may not already be part
|
371
|
-
of the bundle. `stub` should only be used at the top level bundle, not
|
372
|
-
within any subdependencies.
|
348
|
+
Would produce:
|
373
349
|
|
350
|
+
```js
|
351
|
+
var a = "A";
|
352
|
+
var b = "B";
|
353
|
+
```
|
374
354
|
|
375
|
-
|
355
|
+
You can also see [Index files are proxies for folders](#index-files-are-proxies-for-folders) for another method of organizing folders that will give you more control.
|
376
356
|
|
377
|
-
|
357
|
+
### require_tree
|
378
358
|
|
379
|
-
|
359
|
+
`require_tree` *path* works like `require_directory`, but operates
|
360
|
+
recursively to require all files in all subdirectories of the
|
361
|
+
directory specified by *path*.
|
380
362
|
|
381
|
-
|
363
|
+
### link
|
382
364
|
|
383
|
-
|
365
|
+
`link` *path* declares a dependency on the target *path* and adds it to a list
|
366
|
+
of subdependencies to be compiled when the asset is written out to
|
367
|
+
disk.
|
384
368
|
|
385
|
-
|
369
|
+
Example:
|
386
370
|
|
387
|
-
|
388
|
-
|
389
|
-
* `:cache` - A `Sprockets::Cache` instance. See [`Sprockets::Cache#fetch`](https://github.com/rails/sprockets/blob/master/lib/sprockets/cache.rb).
|
390
|
-
* `:uri` - String Asset URI.
|
391
|
-
* `:filename` - String full path to original file.
|
392
|
-
* `:load_path` - String current load path for filename.
|
393
|
-
* `:name` - String logical path for filename.
|
394
|
-
* `:content_type` - String content type of the output asset.
|
395
|
-
* `:metadata` - Hash of processor metadata.
|
371
|
+
If you've got a `manifest.js` file and you want to specify that a `admin.js` source file should be
|
372
|
+
generated and made available to the public you can link it by including this in the `manifest.js` file:
|
396
373
|
|
397
|
-
```
|
398
|
-
|
399
|
-
input[:cache].fetch("my:cache:key:v1") do
|
400
|
-
# Remove all semicolons from source
|
401
|
-
input[:data].gsub(";", "")
|
402
|
-
end
|
403
|
-
end
|
374
|
+
```
|
375
|
+
//= link admin.js
|
404
376
|
```
|
405
377
|
|
406
|
-
|
378
|
+
The argument to `link` is a _logical path_, that is it will be resolved according to the
|
379
|
+
configured asset load paths. See [Accesing Assets](#accessing-assets) above. A path relative to
|
380
|
+
the current file won't work, it must be a logical path.
|
407
381
|
|
408
|
-
|
382
|
+
**Caution**: the "link" directive should always have an explicit extension on the end.
|
409
383
|
|
410
|
-
|
384
|
+
### link_directory
|
411
385
|
|
412
|
-
|
386
|
+
`link_directory` *path* links all the files inside the directory specified by the *path*. By "link", we mean they are specified as compilation targets to be written out to disk, and made available to be served to user-agents.
|
413
387
|
|
414
|
-
|
388
|
+
Files in subdirectories will not be linked (Compare to [link_tree](#link_tree)).
|
415
389
|
|
416
|
-
*
|
417
|
-
* `:stubbed` - A `Set` of String Asset URIs that will be omitted from the `:required` set.
|
418
|
-
* `:links` - A `Set` of String Asset URIs that should be compiled along with this asset.
|
419
|
-
* `:dependencies` - A `Set` of String Cache URIs that should be monitored for caching.
|
390
|
+
The *path* argument to `link_directory` is _not_ a logical path (it does not use the asset load paths), but is a path relative to the file the `link_directory` directive is found in, and can use `..` to . For instance, you might want:
|
420
391
|
|
421
|
-
```
|
422
|
-
|
423
|
-
|
424
|
-
required = Set.new(input[:metadata][:required])
|
392
|
+
```js
|
393
|
+
//= link_directory ../stylesheets
|
394
|
+
```
|
425
395
|
|
426
|
-
|
427
|
-
|
396
|
+
`link_directory` can take an optional second argument with an extension or content-type, with the
|
397
|
+
two arguments separated by a space:
|
428
398
|
|
429
|
-
|
430
|
-
|
399
|
+
```js
|
400
|
+
//= link_directory ../stylesheets text/css
|
401
|
+
//= link_directory ../more_stylesheets .css
|
431
402
|
```
|
432
403
|
|
404
|
+
This will limit the matching files to link to only files recognized as that type. An extension is
|
405
|
+
just a shortcut for the type referenced, it does not need to match the source file exactly, but
|
406
|
+
instead identifies the content-type the source file must be recognized as.
|
433
407
|
|
434
|
-
|
408
|
+
### link_tree
|
435
409
|
|
436
|
-
|
410
|
+
`link_tree` *path* works like [link_directory](#link_directory), but operates
|
411
|
+
recursively to link all files in all subdirectories of the
|
412
|
+
directory specified by *path*.
|
437
413
|
|
438
|
-
|
439
|
-
GitHub](https://github.com/rails/sprockets). You can check out a
|
440
|
-
copy of the latest code using Git:
|
414
|
+
Example:
|
441
415
|
|
442
|
-
|
416
|
+
```js
|
417
|
+
//= link_tree ./path/to/folder
|
418
|
+
```
|
443
419
|
|
444
|
-
|
445
|
-
[Sprockets issue
|
446
|
-
tracker](https://github.com/rails/sprockets/issues). Or, clone
|
447
|
-
the Sprockets repository, write a failing test case, fix the bug and
|
448
|
-
submit a pull request.
|
420
|
+
Like `link_directory`, the argument is path relative to the current file, it is *not* a 'logical path' tresolved against load paths.
|
449
421
|
|
450
|
-
### Version History
|
451
422
|
|
452
|
-
|
423
|
+
As with `link_directory`, you can also specify a second argument -- separated by a space -- so any extra files not matching the content-type specified will be ignored:
|
453
424
|
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
* Removed builtin support for LESS.
|
459
|
-
* Removed `//= include` directive support.
|
460
|
-
* Deprecated `BundledAsset#to_a`. Use `BundledAsset#included` to access debugging subcomponents.
|
461
|
-
* Support circular dependencies. For parity with ES6 modules.
|
462
|
-
* Manifest compilation will no longer generate .gz files by default. [Mixing
|
463
|
-
Content-Encoding and ETags is just a bad
|
464
|
-
idea](https://issues.apache.org/bugzilla/show_bug.cgi?id=39727)
|
465
|
-
* Added linked or referenced assets. When an asset is compiled, any of its links will be compiled as well.
|
466
|
-
* Introduce some limitations around enumerating all logical paths. 4.x will deprecate it and favor linked manifests for compliation.
|
467
|
-
* Add Asset integrity attribute for Subresource Integrity
|
468
|
-
* Default digest changed to SHA256. Configuring `digest_class` is deprecated.
|
469
|
-
* Rename `Asset#digest` to `Asset#hexdigest`. `Asset#digest` is deprecated and will
|
470
|
-
return a raw byte String in 4.x.
|
471
|
-
* Added transitional compatibility flag to `Environment#resolve(path, compat: true)`. 2.x mode operates with `compat: true` and 4.x with `compat: false`
|
472
|
-
* `manifest-abc123.json` renamed to `.sprockets-abc123.json`
|
425
|
+
```js
|
426
|
+
//= link_tree ./path/to/folder text/javascript
|
427
|
+
//= link_tree ./path/to/other_folder .js
|
428
|
+
```
|
473
429
|
|
474
|
-
**2.12.3** (October 28, 2014)
|
475
430
|
|
476
|
-
|
431
|
+
### depend_on
|
477
432
|
|
478
|
-
|
433
|
+
`depend_on` *path* declares a dependency on the given *path* without
|
434
|
+
including it in the bundle. This is useful when you need to expire an
|
435
|
+
asset's cache in response to a change in another file.
|
479
436
|
|
480
|
-
|
481
|
-
asset compiles. Though, you should not depend on internal asset resolves to be
|
482
|
-
completely restricted for security reasons. Assets themselves should be
|
483
|
-
considered full scripting environments with filesystem access.
|
437
|
+
**Example:**
|
484
438
|
|
485
|
-
|
439
|
+
If you have a file such as `bar.data` and you're using data from that file in another file, then
|
440
|
+
you need to tell sprockets that it needs to re-compile the file if `bar.data` changes:
|
486
441
|
|
487
|
-
|
442
|
+
```js
|
443
|
+
//= depend_on "bar.data"
|
488
444
|
|
489
|
-
|
445
|
+
var bar = '<%= File.read("bar.data") %>'
|
446
|
+
```
|
490
447
|
|
491
|
-
|
492
|
-
issues with Sass 3.3.x.
|
448
|
+
### depend_on_asset
|
493
449
|
|
494
|
-
|
450
|
+
`depend_on_asset` *path* works like `depend_on`, but operates
|
451
|
+
recursively reading the file and following the directives found. This is automatically implied if you use `link`, so consider if it just makes sense using `link` instead of `depend_on_asset`.
|
495
452
|
|
496
|
-
|
497
|
-
* Default digest changed to SHA1. To continue using MD5.
|
498
|
-
`env.digest_class = Digest::MD5`.
|
453
|
+
### stub
|
499
454
|
|
500
|
-
|
455
|
+
`stub` *path* excludes that asset and its dependencies from the asset bundle.
|
456
|
+
The *path* must be a valid asset and may or may not already be part
|
457
|
+
of the bundle. `stub` should only be used at the top level bundle, not
|
458
|
+
within any subdependencies.
|
501
459
|
|
502
|
-
|
460
|
+
### Invoking Ruby with ERB
|
503
461
|
|
504
|
-
|
462
|
+
Sprockets provides an ERB engine for preprocessing assets using
|
463
|
+
embedded Ruby code. Append `.erb` to a CSS or JavaScript asset's
|
464
|
+
filename to enable the ERB engine.
|
505
465
|
|
506
|
-
|
466
|
+
For example if you have an `app/application/javascripts/app_name.js.erb`
|
467
|
+
you could have this in the template
|
507
468
|
|
508
|
-
|
469
|
+
```js
|
470
|
+
var app_name = "<%= ENV['APP_NAME'] %>";
|
471
|
+
```
|
509
472
|
|
510
|
-
|
511
|
-
|
473
|
+
Generated files are cached. If you're using an `ENV` var then
|
474
|
+
when you change then ENV var the asset will be forced to
|
475
|
+
recompile. This behavior is only true for environment variables,
|
476
|
+
if you are pulling a value from somewhere else, such as a database,
|
477
|
+
must manually invalidate the cache to see the change.
|
512
478
|
|
513
|
-
|
479
|
+
If you're using Rails, there are helpers you can use such as `asset_url`
|
480
|
+
that will cause a recompile if the value changes.
|
514
481
|
|
515
|
-
|
482
|
+
For example if you have this in your `application.css`
|
516
483
|
|
517
|
-
|
484
|
+
``` css
|
485
|
+
.logo {
|
486
|
+
background: url(<%= asset_url("logo.png") %>)
|
487
|
+
}
|
488
|
+
```
|
518
489
|
|
519
|
-
|
490
|
+
When you modify the `logo.png` on disk, it will force `application.css` to be
|
491
|
+
recompiled so that the fingerprint will be correct in the generated asset.
|
520
492
|
|
521
|
-
|
493
|
+
You can manually make sprockets depend on any other file that is generated
|
494
|
+
by sprockets by using the `depend_on` directive. Rails implements the above
|
495
|
+
feature by auto calling `depend_on` on the original asset when the `asset_url`
|
496
|
+
is used inside of an asset.
|
522
497
|
|
523
|
-
|
524
|
-
* Fixed manifest logger when environment is disabled
|
498
|
+
### Styling with Sass and SCSS
|
525
499
|
|
526
|
-
|
500
|
+
[Sass](http://sass-lang.com/) is a language that compiles to CSS and
|
501
|
+
adds features like nested rules, variables, mixins and selector
|
502
|
+
inheritance.
|
527
503
|
|
528
|
-
|
504
|
+
If the `sass` gem is available to your application, you can use Sass
|
505
|
+
to write CSS assets in Sprockets.
|
529
506
|
|
530
|
-
|
507
|
+
Sprockets supports both Sass syntaxes. For the original
|
508
|
+
whitespace-sensitive syntax, use the extension `.sass`. For the
|
509
|
+
new SCSS syntax, use the extension `.scss`.
|
531
510
|
|
532
|
-
|
533
|
-
|
511
|
+
In Rails if you have `app/application/stylesheets/foo.scss` it can
|
512
|
+
be referenced with `<%= asset_path("foo.css") %>`. When referencing
|
513
|
+
an asset in Rails, always specify the extension you want. Sprockets will
|
514
|
+
convert `foo.scss` to `foo.css`.
|
534
515
|
|
535
|
-
|
516
|
+
### Scripting with CoffeeScript
|
536
517
|
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
* Allow manifest instance to be set on rake task
|
518
|
+
[CoffeeScript](http://jashkenas.github.io/coffeescript/) is a
|
519
|
+
language that compiles to the "good parts" of JavaScript, featuring a
|
520
|
+
cleaner syntax with array comprehensions, classes, and function
|
521
|
+
binding.
|
542
522
|
|
543
|
-
|
523
|
+
If the `coffee-script` gem is available to your application, you can
|
524
|
+
use CoffeeScript to write JavaScript assets in Sprockets. Note that
|
525
|
+
the CoffeeScript compiler is written in JavaScript, and you will need
|
526
|
+
an [ExecJS](https://github.com/rails/execjs)-supported runtime
|
527
|
+
on your system to invoke it.
|
544
528
|
|
545
|
-
|
529
|
+
To write JavaScript assets with CoffeeScript, use the extension
|
530
|
+
`.coffee`.
|
546
531
|
|
547
|
-
|
532
|
+
In Rails if you have `app/application/javascripts/foo.coffee` it can
|
533
|
+
be referenced with `<%= asset_path("foo.js") %>`. When referencing
|
534
|
+
an asset in Rails, always specify the extension you want. Sprockets will
|
535
|
+
convert `foo.coffee` to `foo.js`.
|
548
536
|
|
549
|
-
* Fixed Ruby 2.0 RegExp warning
|
550
|
-
* Provide stubbed implementation of context *_path helpers
|
551
|
-
* Add SassCompressor
|
552
537
|
|
553
|
-
|
538
|
+
## ES6 Support
|
554
539
|
|
555
|
-
|
540
|
+
Sprockets 4 ships with a Babel processor. This allows you to transpile ECMAScript6 to JavaScript just like you would transpile CoffeeScript to JavaScript. To use this, modify your Gemfile:
|
556
541
|
|
557
|
-
|
542
|
+
```ruby
|
543
|
+
gem 'babel-transpiler'
|
544
|
+
```
|
558
545
|
|
559
|
-
|
560
|
-
* Check absolute paths passed to depend_on
|
546
|
+
Any asset with the extension `es6` will be treated as an ES6 file:
|
561
547
|
|
562
|
-
|
548
|
+
```es6
|
549
|
+
// app/assets/javascript/application.es6
|
563
550
|
|
564
|
-
|
565
|
-
* Include dependency paths in asset mtime
|
551
|
+
var square = (n) => n * n
|
566
552
|
|
567
|
-
|
553
|
+
console.log(square);
|
554
|
+
```
|
568
555
|
|
569
|
-
|
556
|
+
Start a Rails server in development mode and visit `localhost:3000/assets/application.js`, and this asset will be transpiled to JavaScript:
|
570
557
|
|
571
|
-
|
558
|
+
```js
|
559
|
+
var square = function square(n) {
|
560
|
+
return n * n;
|
561
|
+
};
|
572
562
|
|
573
|
-
|
574
|
-
|
563
|
+
console.log(square);
|
564
|
+
```
|
575
565
|
|
576
|
-
**2.4.0** (March 27, 2012)
|
577
566
|
|
578
|
-
|
579
|
-
* Added global processor registry
|
567
|
+
### JavaScript Templating with EJS and Eco
|
580
568
|
|
581
|
-
|
569
|
+
Sprockets supports *JavaScript templates* for client-side rendering of
|
570
|
+
strings or markup. JavaScript templates have the special format
|
571
|
+
extension `.jst` and are compiled to JavaScript functions.
|
582
572
|
|
583
|
-
|
573
|
+
When loaded, a JavaScript template function can be accessed by its
|
574
|
+
logical path as a property on the global `JST` object. Invoke a
|
575
|
+
template function to render the template as a string. The resulting
|
576
|
+
string can then be inserted into the DOM.
|
584
577
|
|
585
|
-
|
578
|
+
```
|
579
|
+
<!-- templates/hello.jst.ejs -->
|
580
|
+
<div>Hello, <span><%= name %></span>!</div>
|
586
581
|
|
587
|
-
|
588
|
-
|
589
|
-
|
582
|
+
// application.js
|
583
|
+
//= require templates/hello
|
584
|
+
$("#hello").html(JST["templates/hello"]({ name: "Sam" }));
|
585
|
+
```
|
590
586
|
|
591
|
-
|
587
|
+
Sprockets supports two JavaScript template languages:
|
588
|
+
[EJS](https://github.com/sstephenson/ruby-ejs), for embedded
|
589
|
+
JavaScript, and [Eco](https://github.com/sstephenson/ruby-eco), for
|
590
|
+
embedded CoffeeScript. Both languages use the familiar `<% … %>`
|
591
|
+
syntax for embedding logic in templates.
|
592
|
+
|
593
|
+
If the `ejs` gem is available to your application, you can use EJS
|
594
|
+
templates in Sprockets. EJS templates have the extension `.jst.ejs`.
|
595
|
+
|
596
|
+
If the `eco` gem is available to your application, you can use [Eco
|
597
|
+
templates](https://github.com/sstephenson/eco) in Sprockets. Eco
|
598
|
+
templates have the extension `.jst.eco`. Note that the `eco` gem
|
599
|
+
depends on the CoffeeScript compiler, so the same caveats apply as
|
600
|
+
outlined above for the CoffeeScript engine.
|
601
|
+
|
602
|
+
### Minifying Assets
|
603
|
+
|
604
|
+
Several JavaScript and CSS minifiers are available through shorthand.
|
605
|
+
|
606
|
+
In Rails you will specify them with:
|
607
|
+
|
608
|
+
```ruby
|
609
|
+
config.assets.js_compressor = :uglify
|
610
|
+
config.assets.css_compressor = :scss
|
611
|
+
```
|
592
612
|
|
593
|
-
|
613
|
+
If you're not using Rails, configure this directly on the "environment".
|
594
614
|
|
595
|
-
|
615
|
+
``` ruby
|
616
|
+
environment.js_compressor = :uglify
|
617
|
+
environment.css_compressor = :scss
|
618
|
+
```
|
596
619
|
|
597
|
-
|
598
|
-
|
599
|
-
* Added json manifest log of compiled assets.
|
600
|
-
* Added `stub` directive that allows you to exclude files from the bundle.
|
601
|
-
* Added per environment external encoding (Environment#default_external_encoding). Defaults to UTF-8. Fixes issues where LANG is not set correctly and Rubys default external is set to ASCII.
|
620
|
+
If you are using Sprockets directly with a Rack app, don't forget to add
|
621
|
+
the `uglifier` and `sass` gems to your Gemfile when using above options.
|
602
622
|
|
603
|
-
|
623
|
+
### Gzip
|
604
624
|
|
605
|
-
|
625
|
+
By default when Sprockets generates a compiled asset file it will also produce a gzipped copy of that file. Sprockets only gzips non-binary files such as CSS, javascript, and SVG files.
|
606
626
|
|
607
|
-
|
627
|
+
For example if Sprockets is generating
|
608
628
|
|
609
|
-
|
629
|
+
```
|
630
|
+
application-12345.css
|
631
|
+
```
|
610
632
|
|
611
|
-
|
633
|
+
Then it will also generate a compressed copy in
|
612
634
|
|
613
|
-
|
614
|
-
|
615
|
-
|
635
|
+
```
|
636
|
+
application-12345.css.gz
|
637
|
+
```
|
616
638
|
|
617
|
-
|
639
|
+
This behavior can be disabled, refer to your framework specific documentation.
|
618
640
|
|
619
|
-
|
620
|
-
* Make JST namespace configurable.
|
641
|
+
### Serving Assets
|
621
642
|
|
622
|
-
|
643
|
+
In production you should generate your assets to a directory on disk and serve them either via Nginx or a feature like Rail's `config.public_file_server.enabled = true`.
|
623
644
|
|
624
|
-
|
645
|
+
On Rails you can generate assets by running:
|
625
646
|
|
626
|
-
|
647
|
+
```term
|
648
|
+
$ RAILS_ENV=production rake assets:precompile
|
649
|
+
```
|
627
650
|
|
628
|
-
|
629
|
-
* Decode URIs as default internal.
|
630
|
-
* Fix symlinked asset directories.
|
651
|
+
In development Rails will serve assets from `Sprockets::Server`.
|
631
652
|
|
632
|
-
|
653
|
+
## Contributing to Sprockets
|
633
654
|
|
634
|
-
|
655
|
+
Sprockets is the work of hundreds of contributors. You're encouraged to submit pull requests, propose
|
656
|
+
features and discuss issues.
|
635
657
|
|
636
|
-
|
658
|
+
See [CONTRIBUTING](CONTRIBUTING.md).
|
637
659
|
|
638
|
-
|
660
|
+
### Version History
|
639
661
|
|
640
|
-
|
662
|
+
Please see the [CHANGELOG](https://github.com/rails/sprockets/tree/master/CHANGELOG.md)
|
641
663
|
|
642
|
-
|
643
|
-
|
664
|
+
## License
|
665
|
+
Sprockets is released under the [MIT License](MIT-LICENSE).
|