sinatra-assetpack 0.0.8 → 0.0.9
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -0
- data/HISTORY.md +15 -0
- data/README.md +203 -112
- data/Rakefile +17 -0
- data/docsrc/style.css +32 -0
- data/{example → examples/basic}/.gitignore +0 -0
- data/{example → examples/basic}/Rakefile +0 -0
- data/{example → examples/basic}/app.rb +0 -0
- data/{example → examples/basic}/app/css/test.sass +0 -0
- data/{example → examples/basic}/app/images/icon.png +0 -0
- data/{example → examples/basic}/app/js/app.js +0 -0
- data/{example → examples/basic}/app/js/vendor/jquery.js +0 -0
- data/{example → examples/basic}/app/js/vendor/jquery.plugin.js +0 -0
- data/{example → examples/basic}/app/js/vendor/underscore.js +0 -0
- data/{example → examples/basic}/views/index.erb +0 -0
- data/examples/compass/.gitignore +1 -0
- data/examples/compass/Rakefile +7 -0
- data/examples/compass/app.rb +45 -0
- data/examples/compass/app/css/main.scss +64 -0
- data/examples/compass/app/images/icon-scfd8d7d404.png +0 -0
- data/examples/compass/app/images/icon/mail.png +0 -0
- data/examples/compass/app/images/icon/refresh.png +0 -0
- data/examples/compass/app/images/junk/mail.png +0 -0
- data/examples/compass/app/images/junk/refresh.png +0 -0
- data/examples/compass/app/js/app.js +3 -0
- data/examples/compass/app/js/vendor/jquery.js +2 -0
- data/examples/compass/app/js/vendor/jquery.plugin.js +2 -0
- data/examples/compass/app/js/vendor/underscore.js +2 -0
- data/examples/compass/config.ru +3 -0
- data/examples/compass/views/index.erb +15 -0
- data/lib/sinatra/assetpack.rb +1 -1
- data/lib/sinatra/assetpack/class_methods.rb +13 -7
- data/lib/sinatra/assetpack/options.rb +0 -8
- data/lib/sinatra/assetpack/package.rb +1 -1
- data/lib/sinatra/assetpack/rake.rb +7 -1
- data/lib/sinatra/assetpack/version.rb +1 -1
- data/test/app/app.rb +4 -0
- data/test/app/app/css/behavior.htc +1 -0
- data/test/app/app/js_glob/a/b/c1/hello.js +1 -0
- data/test/app/app/js_glob/a/b/c2/hi.js +1 -0
- data/test/app/app/js_glob/a/b/c2/hola.js +1 -0
- data/test/cache_test.rb +3 -4
- data/test/compressed_test.rb +30 -0
- data/test/glob_test.rb +42 -0
- data/test/local_file_test.rb +1 -2
- data/test/mime_type_test.rb +33 -0
- data/test/non_existent_test.rb +1 -2
- data/test/options_test.rb +1 -2
- data/test/order_test.rb +1 -2
- data/test/stylus_test.rb +1 -2
- data/test/template_cache_test.rb +29 -0
- data/test/test_helper.rb +6 -7
- data/test/yui_test.rb +1 -1
- metadata +59 -37
data/.gitignore
CHANGED
data/HISTORY.md
CHANGED
@@ -1,3 +1,18 @@
|
|
1
|
+
v0.0.9 - Sep 18, 2011
|
2
|
+
---------------------
|
3
|
+
|
4
|
+
### Fixed:
|
5
|
+
* Fixed a bad route terminating issue. (#9)
|
6
|
+
* Fix the Rake task when the main App class is in a module. (#11)
|
7
|
+
|
8
|
+
### Changed:
|
9
|
+
* Use Sinatra's `template_cache`. This makes AssetPack honor Sinatra's
|
10
|
+
`reload_templates` setting. (#15)
|
11
|
+
|
12
|
+
### Added:
|
13
|
+
* Added .htc (IE behavior files) to the list of file formats to be served.
|
14
|
+
* Added examples.
|
15
|
+
|
1
16
|
v0.0.8 - Sep 06, 2011
|
2
17
|
---------------------
|
3
18
|
|
data/README.md
CHANGED
@@ -1,9 +1,9 @@
|
|
1
|
-
# Sinatra AssetPack
|
1
|
+
# [Sinatra AssetPack](http://ricostacruz.com/sinatra-assetpack)
|
2
2
|
#### Asset packer for Sinatra
|
3
3
|
|
4
4
|
This is *the* most convenient way to set up your CSS/JS (and images) in a
|
5
|
-
Sinatra app. Seriously. No need for crappy routes to
|
6
|
-
No-siree!
|
5
|
+
[Sinatra](http://sinatrarb.com) app. Seriously. No need for crappy routes to
|
6
|
+
render Sass or whatever. No-siree!
|
7
7
|
|
8
8
|
1. Drop your assets into `/app` like so (you can configure directories don't worry):
|
9
9
|
* JavaScript/CoffeeScript files in `/app/js`
|
@@ -14,12 +14,26 @@ No-siree!
|
|
14
14
|
messy *script* and *link* tags
|
15
15
|
5. BOOM! You're in business baby!
|
16
16
|
|
17
|
+
Installation
|
18
|
+
------------
|
19
|
+
|
20
|
+
Sinatra AssetPack is a simple Ruby gem. You can install it via `gem install`.
|
21
|
+
|
22
|
+
``` console
|
23
|
+
$ gem install sinatra-assetpack
|
24
|
+
```
|
25
|
+
|
26
|
+
#### Bundler users
|
27
|
+
If you use Bundler, you will need to add it to your *Gemfile*.
|
28
|
+
|
29
|
+
``` ruby
|
30
|
+
gem 'sinatra-assetpack', :require => 'sinatra/assetpack'
|
31
|
+
```
|
32
|
+
|
33
|
+
|
17
34
|
Setup
|
18
35
|
-----
|
19
36
|
|
20
|
-
* Bundler? Add to *Gemfile*: `gem 'sinatra-assetpack', :require => 'sinatra/assetpack'`
|
21
|
-
* Else: `$ gem install sinatra-assetpack`
|
22
|
-
|
23
37
|
Install the plugin and add some options. (Feel free to omit the *Optional*
|
24
38
|
items, they're listed here for posterity):
|
25
39
|
|
@@ -52,18 +66,20 @@ class App < Sinatra::Base
|
|
52
66
|
end
|
53
67
|
```
|
54
68
|
|
55
|
-
|
69
|
+
#### Using in layouts
|
70
|
+
In your layouts, use the `css` and `js` helpers:
|
71
|
+
*(Use haml? Great! Use `!= css :youreawesome` instead.)*
|
56
72
|
|
57
73
|
``` erb
|
58
74
|
<%= css :application, :media => 'screen' %>
|
59
75
|
<%= js :app %>
|
60
76
|
```
|
61
77
|
|
62
|
-
*(Use haml? Great! Use `!= css :youreawesome`.)*
|
63
78
|
|
64
79
|
And then what?
|
65
80
|
--------------
|
66
81
|
|
82
|
+
#### Development mode
|
67
83
|
If you're on **development** mode, it serves each of the files as so:
|
68
84
|
|
69
85
|
``` html
|
@@ -73,6 +89,7 @@ If you're on **development** mode, it serves each of the files as so:
|
|
73
89
|
<script type='text/javascript' src='/js/app/main.589491.js'></script>
|
74
90
|
```
|
75
91
|
|
92
|
+
#### Production mode
|
76
93
|
If you're on **production** mode, it serves a compressed version in the URLs you specify:
|
77
94
|
|
78
95
|
``` html
|
@@ -83,32 +100,32 @@ If you're on **production** mode, it serves a compressed version in the URLs you
|
|
83
100
|
Features
|
84
101
|
--------
|
85
102
|
|
86
|
-
* __CoffeeScript support__
|
103
|
+
* __CoffeeScript support__ Just add your coffee files in one of the paths
|
87
104
|
served (in the example, `app/js/hello.coffee`) and they will be available as JS
|
88
105
|
files (`http://localhost:4567/js/hello.js`).
|
89
106
|
|
90
|
-
* __Sass/Less/SCSS support__
|
107
|
+
* __Sass/Less/SCSS support__ Works the same way. Place your dynamic CSS files
|
91
108
|
in there (say, `app/css/screen.sass`) and they will be available as CSS files
|
92
109
|
(`http://localhost:4567/css/screen.css`).
|
93
110
|
|
94
|
-
* __Cache busting__
|
111
|
+
* __Cache busting__ the `css` and `js` helpers automatically ensures the URL
|
95
112
|
is based on when the file was last modified. The URL `/js/jquery.js` may be
|
96
113
|
translated to `/js/jquery.8237898.js` to ensure visitors always get the latest
|
97
114
|
version.
|
98
115
|
|
99
|
-
* __Images support__
|
116
|
+
* __Images support__ Image filenames in your CSS will automatically get a
|
100
117
|
cache-busting suffix (eg, `/images/icon.742958.png`).
|
101
118
|
|
102
|
-
* __Embedded images support__
|
119
|
+
* __Embedded images support__ You can embed images in your CSS files as
|
103
120
|
`data:` URIs by simply adding `?embed` to the end of your URL.
|
104
121
|
|
105
|
-
* __No intermediate files needed__
|
122
|
+
* __No intermediate files needed__ You don't need to generate compiled files.
|
106
123
|
You can, but it's optional. Keeps your source repo clean!
|
107
124
|
|
108
|
-
* __Auto minification (with caching)__
|
125
|
+
* __Auto minification (with caching)__ JS and CSS files will be compressed as
|
109
126
|
needed.
|
110
127
|
|
111
|
-
* __Heroku support__
|
128
|
+
* __Heroku support__ Oh yes. That's right.
|
112
129
|
|
113
130
|
Compressors
|
114
131
|
-----------
|
@@ -124,11 +141,11 @@ assets {
|
|
124
141
|
}
|
125
142
|
```
|
126
143
|
|
127
|
-
|
128
|
-
----
|
129
|
-
|
130
144
|
### YUI Compressor
|
131
145
|
|
146
|
+
This uses Yahoo's Java-powered YUI compressor. For YUI compression, you need the
|
147
|
+
YUI compressor gem (`gem install yui-compressor`).
|
148
|
+
|
132
149
|
``` ruby
|
133
150
|
assets {
|
134
151
|
js_compression :yui
|
@@ -138,30 +155,23 @@ assets {
|
|
138
155
|
}
|
139
156
|
```
|
140
157
|
|
141
|
-
For YUI compression, you need the YUI compressor gem.
|
142
|
-
|
143
|
-
* Bundler? Add to *Gemfile*: `gem 'yui-compressor', :require => 'yui/compressor'`
|
144
|
-
* Else, `gem install yui-compressor`
|
145
|
-
|
146
|
-
----
|
147
|
-
|
148
158
|
### SASS compression
|
149
159
|
|
160
|
+
For SASS compression, you need the Sass gem (`gem install sass`). This treats
|
161
|
+
the CSS files as Scss files and uses Sass's `output: :compressed`.
|
162
|
+
|
150
163
|
``` ruby
|
151
164
|
assets {
|
152
165
|
css_compression :sass
|
153
166
|
}
|
154
167
|
```
|
155
168
|
|
156
|
-
For SASS compression, you need the Sass gem.
|
157
|
-
|
158
|
-
* Bundler? Add to *Gemfile*: `gem 'sass'`
|
159
|
-
* Else, `gem install sass`
|
160
|
-
|
161
|
-
----
|
162
|
-
|
163
169
|
### Sqwish CSS compression
|
164
170
|
|
171
|
+
[Sqwish](http://github.com/ded/sqwish) is a NodeJS-based CSS compressor. To use
|
172
|
+
Sqwish with AssetPack, install it using `npm install -g sqwish`. You need NodeJS
|
173
|
+
and NPM installed.
|
174
|
+
|
165
175
|
``` ruby
|
166
176
|
assets {
|
167
177
|
css_compression :sqwish
|
@@ -169,13 +179,15 @@ assets {
|
|
169
179
|
}
|
170
180
|
```
|
171
181
|
|
172
|
-
|
173
|
-
Sqwish with AssetPack, install it using `npm install -g sqwish`. You need NodeJS
|
174
|
-
and NPM installed.
|
182
|
+
### Google Closure compression
|
175
183
|
|
176
|
-
|
184
|
+
This uses the [Google closure compiler
|
185
|
+
service](http://closure-compiler.appspot.com/home)
|
186
|
+
to compress your JavaScript. Available levels are:
|
177
187
|
|
178
|
-
|
188
|
+
* `WHITESPACE_ONLY`
|
189
|
+
* `SIMPLE_OPTIMIZATIONS`
|
190
|
+
* `ADVANCED_OPTIMIZATIONS`
|
179
191
|
|
180
192
|
``` ruby
|
181
193
|
assets {
|
@@ -184,11 +196,6 @@ assets {
|
|
184
196
|
}
|
185
197
|
```
|
186
198
|
|
187
|
-
This uses the [Google closure compiler service](http://closure-compiler.appspot.com/home)
|
188
|
-
to compress your JavaScript.
|
189
|
-
|
190
|
-
Available levels: `WHITESPACE_ONLY`, `SIMPLE_OPTIMIZATIONS`, `ADVANCED_OPTIMIZATIONS`
|
191
|
-
|
192
199
|
Images
|
193
200
|
------
|
194
201
|
|
@@ -201,6 +208,7 @@ ImageMagick is required to generate full image tags with width and height.
|
|
201
208
|
<!-- Output: --> <img src='/images/email.873842.png' width='16' height='16' />
|
202
209
|
```
|
203
210
|
|
211
|
+
#### URL translation
|
204
212
|
In your CSS files, `url()`'s will automatically be translated.
|
205
213
|
|
206
214
|
``` css
|
@@ -208,6 +216,7 @@ In your CSS files, `url()`'s will automatically be translated.
|
|
208
216
|
/* Output: */ .email { background: url(/images/email.6783478.png); }
|
209
217
|
```
|
210
218
|
|
219
|
+
#### Image embedding
|
211
220
|
Want to embed images as `data:` URI's? Sure! Just add `?embed` at the end of the
|
212
221
|
URL.
|
213
222
|
|
@@ -219,24 +228,26 @@ URL.
|
|
219
228
|
Need to build the files?
|
220
229
|
------------------------
|
221
230
|
|
222
|
-
Actually, you don't need to
|
231
|
+
Actually, you don't need to—this is optional! But add this to your `Rakefile`:
|
223
232
|
|
224
233
|
``` ruby
|
234
|
+
# Rakefile
|
225
235
|
APP_FILE = 'app.rb'
|
226
236
|
APP_CLASS = 'App'
|
227
237
|
|
228
238
|
require 'sinatra/assetpack/rake'
|
229
239
|
```
|
230
240
|
|
231
|
-
|
241
|
+
#### Invoking
|
242
|
+
Now invoke the `assetpack:build` Rake task. This will create files in `/public`.
|
232
243
|
|
233
244
|
$ rake assetpack:build
|
234
245
|
|
235
|
-
This will create files in `/public`.
|
236
246
|
|
237
|
-
API reference
|
238
|
-
|
247
|
+
API reference
|
248
|
+
-------------
|
239
249
|
|
250
|
+
#### Assets block
|
240
251
|
All configuration happens in the `assets` block. You may invoke it in 2 ways:
|
241
252
|
|
242
253
|
``` ruby
|
@@ -257,68 +268,82 @@ class App < Sinatra::Base
|
|
257
268
|
end
|
258
269
|
```
|
259
270
|
|
260
|
-
|
271
|
+
#### Getting options
|
272
|
+
Invoking it without a block allows you to access the options. This works for
|
273
|
+
almost all the options, with the exception for `css`, `js` and `serve`.
|
261
274
|
|
262
275
|
``` ruby
|
263
276
|
App.assets
|
264
277
|
App.assets.js_compression #=> :yui
|
265
278
|
```
|
266
279
|
|
267
|
-
----
|
268
|
-
|
269
280
|
### assets.serve
|
270
281
|
|
271
|
-
__Usage:__ `serve 'PATH', :from => 'LOCALPATH'`
|
272
|
-
|
273
282
|
Serves files from `LOCALPATH` in the URI path `PATH`. Both parameters are
|
274
283
|
required.
|
275
284
|
|
276
285
|
``` ruby
|
277
|
-
#
|
278
|
-
|
279
|
-
serve '/js', from: '/app/javascripts'
|
286
|
+
# Usage
|
287
|
+
serve 'PATH', :from => 'LOCALPATH'
|
280
288
|
```
|
281
289
|
|
282
|
-
|
290
|
+
#### Example
|
291
|
+
This makes `/app/javascripts/vendor/jquery.js`
|
292
|
+
available as `http://localhost:4567/js/vendor/jquery.js`.
|
283
293
|
|
284
|
-
|
285
|
-
|
294
|
+
``` ruby
|
295
|
+
serve '/js', from: '/app/javascripts'
|
296
|
+
```
|
286
297
|
|
287
|
-
|
288
|
-
__Usage:__ `js_compression :ENGINE, OPTIONS_HASH`
|
289
|
-
__Usage:__ `css_compression :ENGINE`
|
290
|
-
__Usage:__ `css_compression :ENGINE, OPTIONS_HASH`
|
298
|
+
### assets.js\_compression<br>assets.css\_compression
|
291
299
|
|
292
300
|
Sets the compression engine to use for JavaScript or CSS. This defaults to
|
293
301
|
`:jsmin` and `:simple`, respectively.
|
294
302
|
|
295
303
|
If `OPTIONS_HASH` is given as a hash, it sets options for the engine to use.
|
296
304
|
|
297
|
-
|
298
|
-
|
305
|
+
``` ruby
|
306
|
+
# Usage:
|
307
|
+
assets {
|
308
|
+
js_compression :ENGINE
|
309
|
+
js_compression :ENGINE, OPTIONS_HASH
|
310
|
+
css_compression :ENGINE
|
311
|
+
css_compression :ENGINE, OPTIONS_HASH
|
312
|
+
}
|
313
|
+
```
|
299
314
|
|
300
|
-
|
315
|
+
#### Examples
|
316
|
+
Yo seriously check this out: the first line uses Sqwish with it's defaults, and
|
317
|
+
the second line uses Sqwish with it's magic.
|
301
318
|
|
302
|
-
|
303
|
-
|
319
|
+
``` ruby
|
320
|
+
assets {
|
321
|
+
css_compression :sqwish
|
322
|
+
css_compression :sqwish, :strict => true
|
323
|
+
}
|
324
|
+
```
|
304
325
|
|
305
|
-
|
306
|
-
__Usage:__ `css_compression_options HASH`
|
326
|
+
### assets.js\_compression\_options<br>assets.css\_compression\_options
|
307
327
|
|
308
328
|
Sets the options for the compression engine to use. This is usually not needed
|
309
329
|
as you can already set options using `js_compression` and `css_compression`.
|
310
330
|
|
311
|
-
|
331
|
+
``` ruby
|
332
|
+
# Usage:
|
333
|
+
assets {
|
334
|
+
js_compression_options HASH
|
335
|
+
css_compression_options HASH
|
336
|
+
}
|
337
|
+
```
|
312
338
|
|
313
|
-
|
339
|
+
#### Example
|
340
|
+
This sets the option for `:munge` for the CSS compression engine.
|
314
341
|
|
315
|
-
|
316
|
-
|
342
|
+
``` ruby
|
343
|
+
css_compression_options :munge => true
|
344
|
+
```
|
317
345
|
|
318
|
-
|
319
|
-
__Usage:__ `css :NAME, 'URI', [ PATH1, PATH2, ... ]`
|
320
|
-
__Usage:__ `js :NAME, [ PATH1, PATH2, ... ]`
|
321
|
-
__Usage:__ `js :NAME, 'URI', [ PATH1, PATH2, ... ]`
|
346
|
+
### assets.css<br>assets.js
|
322
347
|
|
323
348
|
Adds packages to be used.
|
324
349
|
|
@@ -326,18 +351,27 @@ The `NAME` is a symbol defines the ID for that given package that you can use
|
|
326
351
|
for the helpers. That is, If a CSS package was defined as `css :main, [ ... ]`,
|
327
352
|
then you will need to use `<%= css :main %>` to render it in views.
|
328
353
|
|
329
|
-
the `URI` is a string that defines where the compressed version will be served.
|
330
|
-
It is optional. If not provided, it will default to `"/
|
331
|
-
`/
|
354
|
+
the `URI` is a string that defines where the compressed version will be served.
|
355
|
+
It is optional. If not provided, it will default to `"/assets/name.type"` (eg:
|
356
|
+
`/assets/main.css`).
|
332
357
|
|
333
358
|
the `PATHs` is an array that defines files that will be served. Take note that
|
334
359
|
this is an array of URI paths, not local paths.
|
335
360
|
|
336
|
-
If a `PATH` contains wildcards, it will be expanded in alphabetical order.
|
361
|
+
If a `PATH` contains wildcards, it will be expanded in alphabetical order.
|
337
362
|
Redundancies will be taken care of.
|
338
363
|
|
339
|
-
|
364
|
+
``` ruby
|
365
|
+
# Usage:
|
366
|
+
assets {
|
367
|
+
css :NAME, [ PATH1, PATH2, ... ]
|
368
|
+
css :NAME, 'URI', [ PATH1, PATH2, ... ]
|
369
|
+
js:NAME, [ PATH1, PATH2, ... ]
|
370
|
+
js:NAME, 'URI', [ PATH1, PATH2, ... ]
|
371
|
+
}
|
372
|
+
```
|
340
373
|
|
374
|
+
#### Example
|
341
375
|
In this example, JavaScript files will be served compressed as
|
342
376
|
`/js/application.js` (default since no `URI` is given). The files will be taken
|
343
377
|
from `./app/javascripts/vendor/jquery*.js`.
|
@@ -361,61 +395,100 @@ API reference: helpers
|
|
361
395
|
|
362
396
|
These are helpers you can use in your views.
|
363
397
|
|
364
|
-
|
365
|
-
|
366
|
-
### css
|
367
|
-
|
368
|
-
__Usage:__ `css :PACKAGE`
|
369
|
-
__Usage:__ `css :PACKAGE_1, :PACKAGE_2, ... :PACKAGE_N, OPTIONS_HASH`
|
370
|
-
__Usage:__ `css :PACKAGE, OPTIONS_HASH`
|
398
|
+
### <%= css %>
|
371
399
|
|
372
400
|
Shows a CSS package named `PACKAGE`. If `OPTIONS_HASH` is given, they will we
|
373
401
|
passed onto the `<link>` tag to be generated as attributes.
|
374
402
|
|
375
403
|
You may specify as many packages as you need, as shown in the second usage line.
|
376
404
|
|
377
|
-
|
378
|
-
|
379
|
-
|
405
|
+
``` ruby
|
406
|
+
# Usage:
|
407
|
+
<%= css :PACKAGE %>
|
408
|
+
<%= css :PACKAGE_1, :PACKAGE_2, ... :PACKAGE_N, OPTIONS_HASH %>
|
409
|
+
<%= css :PACKAGE, OPTIONS_HASH %>
|
410
|
+
```
|
380
411
|
|
381
|
-
|
412
|
+
#### Example 1
|
413
|
+
This links to the `main` stylesheet for *screen* media.
|
382
414
|
|
383
|
-
|
415
|
+
``` erb
|
416
|
+
<%= css :main, media: 'screen' %>
|
384
417
|
|
385
|
-
|
418
|
+
<!-- Output: -->
|
419
|
+
<link rel='stylesheet' type='text/css' href='/css/main.873984.css' media='screen' />
|
420
|
+
```
|
386
421
|
|
387
|
-
|
388
|
-
|
422
|
+
#### Example 2
|
423
|
+
You may also invoke it with multiple packages.
|
389
424
|
|
390
|
-
|
425
|
+
``` erb
|
426
|
+
<%= css :base, :app, :main, media: 'screen' %>
|
391
427
|
|
392
|
-
|
428
|
+
<!-- Output: -->
|
429
|
+
<link rel='stylesheet' type='text/css' href='/css/base.873984.css' media='screen' />
|
430
|
+
<link rel='stylesheet' type='text/css' href='/css/app.873984.css' media='screen' />
|
431
|
+
<link rel='stylesheet' type='text/css' href='/css/main.873984.css' media='screen' />
|
432
|
+
```
|
393
433
|
|
394
|
-
|
395
|
-
__Output:__ `<script type='text/javascript' src='/js/main.783439.js' id='main_script'></script>`
|
434
|
+
### <%= js %>
|
396
435
|
|
397
|
-
|
436
|
+
Same as `css`, but obviously for JavaScript. You may also specify as many packages as you need, just with `css`.
|
398
437
|
|
399
|
-
|
438
|
+
``` erb
|
439
|
+
# Usage:
|
440
|
+
<%= js :PACKAGE %>
|
441
|
+
<%= js :PACKAGE_1, :PACKAGE_2, ... :PACKAGE_N, OPTIONS_HASH %>
|
442
|
+
<%= js :PACKAGE, OPTIONS_HASH %>
|
443
|
+
```
|
444
|
+
|
445
|
+
#### Example
|
446
|
+
This example embeds the *main* package with an ID.
|
400
447
|
|
401
|
-
|
402
|
-
|
448
|
+
``` erb
|
449
|
+
<%= js :main, id: 'main_script' %>
|
450
|
+
|
451
|
+
<!-- Output: -->
|
452
|
+
<script type='text/javascript' src='/js/main.783439.js' id='main_script'></script>
|
453
|
+
```
|
454
|
+
|
455
|
+
### <%= img %>
|
403
456
|
|
404
457
|
Shows an `<img>` tag from the given `SRC`. If the images is found in the asset
|
405
|
-
directories (and ImageMagick is available), `width` and `height` attributes
|
406
|
-
|
458
|
+
directories (and ImageMagick is available), `width` and `height` attributes will
|
459
|
+
be added.
|
460
|
+
|
461
|
+
``` ruby
|
462
|
+
# Usage:
|
463
|
+
img 'SRC'
|
464
|
+
img 'SRC', OPTIONS_HASH
|
465
|
+
```
|
407
466
|
|
408
467
|
If `OPTIONS_HASH` is given, they will we passed onto the `<img>` tag to be
|
409
468
|
generated as attributes.
|
410
469
|
|
411
|
-
|
412
|
-
|
470
|
+
#### Example
|
471
|
+
This example renders an image with an alt tag.
|
472
|
+
|
473
|
+
``` erb
|
474
|
+
<%= img '/images/icon.png', alt: 'Icon' %>
|
475
|
+
|
476
|
+
<!-- Output: -->
|
477
|
+
<img src='/images/icon.834782.png' width='24' height='24' alt='Icon' />`
|
478
|
+
```
|
413
479
|
|
414
480
|
Need Compass support?
|
415
481
|
---------------------
|
416
482
|
|
417
|
-
No, AssetPack doesn't have built-in Compass support,
|
418
|
-
Support](http://sinefunc.com/sinatra-support)
|
483
|
+
No, AssetPack doesn't have built-in [Compass](http://compass-style.org) support,
|
484
|
+
but you can use [Sinatra Support](http://sinefunc.com/sinatra-support).
|
485
|
+
|
486
|
+
For an example of how to use AssetPack with Compass, including on how to use it
|
487
|
+
to generate image [sprites][compsprite], see the [Compass example
|
488
|
+
application.][compex]
|
489
|
+
|
490
|
+
[compex]: https://github.com/rstacruz/sinatra-assetpack/tree/master/examples/compass
|
491
|
+
[compsprite]: http://compass-style.org/reference/compass/utilities/sprites/
|
419
492
|
|
420
493
|
``` ruby
|
421
494
|
# gem install sinatra/support
|
@@ -439,3 +512,21 @@ AssetPack will eventually have:
|
|
439
512
|
* Refactor *Compressor* module
|
440
513
|
* CDN (Cloudfront, S3) support
|
441
514
|
* Better support for Compass sprites
|
515
|
+
|
516
|
+
Acknowledgements
|
517
|
+
----------------
|
518
|
+
|
519
|
+
© 2011, Rico Sta. Cruz. Released under the [MIT
|
520
|
+
License](http://www.opensource.org/licenses/mit-license.php).
|
521
|
+
|
522
|
+
Sinatra-AssetPack is authored and maintained by [Rico Sta. Cruz][rsc] with help
|
523
|
+
from it's [contributors][c]. It is sponsored by my startup, [Sinefunc, Inc][sf].
|
524
|
+
|
525
|
+
* [My website](http://ricostacruz.com) (ricostacruz.com)
|
526
|
+
* [Sinefunc, Inc.](http://sinefunc.com) (sinefunc.com)
|
527
|
+
* [Github](http://github.com/rstacruz) (@rstacruz)
|
528
|
+
* [Twitter](http://twitter.com/rstacruz) (@rstacruz)
|
529
|
+
|
530
|
+
[rsc]: http://ricostacruz.com
|
531
|
+
[c]: http://github.com/rstacruz/sinatra-assetpack/contributors
|
532
|
+
[sf]: http://sinefunc.com
|