sundawg-sinatra-assetpack-fork 0.0.12.pre1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (105) hide show
  1. data/.gitignore +4 -0
  2. data/Gemfile +2 -0
  3. data/HISTORY.md +131 -0
  4. data/README.md +656 -0
  5. data/Rakefile +31 -0
  6. data/docsrc/style.css +32 -0
  7. data/examples/basic/.gitignore +1 -0
  8. data/examples/basic/Rakefile +7 -0
  9. data/examples/basic/app/css/test.sass +11 -0
  10. data/examples/basic/app/images/icon.png +0 -0
  11. data/examples/basic/app/js/app.js +4 -0
  12. data/examples/basic/app/js/vendor/jquery.js +2 -0
  13. data/examples/basic/app/js/vendor/jquery.plugin.js +2 -0
  14. data/examples/basic/app/js/vendor/underscore.js +2 -0
  15. data/examples/basic/app.rb +39 -0
  16. data/examples/basic/views/index.erb +26 -0
  17. data/examples/classic/app.rb +24 -0
  18. data/examples/classic/css/screen.scss +1 -0
  19. data/examples/compass/.gitignore +1 -0
  20. data/examples/compass/Rakefile +7 -0
  21. data/examples/compass/app/css/main.scss +64 -0
  22. data/examples/compass/app/images/icon/mail.png +0 -0
  23. data/examples/compass/app/images/icon/refresh.png +0 -0
  24. data/examples/compass/app/images/icon-scfd8d7d404.png +0 -0
  25. data/examples/compass/app/images/junk/mail.png +0 -0
  26. data/examples/compass/app/images/junk/refresh.png +0 -0
  27. data/examples/compass/app/js/app.js +3 -0
  28. data/examples/compass/app/js/vendor/jquery.js +2 -0
  29. data/examples/compass/app/js/vendor/jquery.plugin.js +2 -0
  30. data/examples/compass/app/js/vendor/underscore.js +2 -0
  31. data/examples/compass/app.rb +45 -0
  32. data/examples/compass/config.ru +3 -0
  33. data/examples/compass/views/index.erb +15 -0
  34. data/lib/sinatra/assetpack/buster_helpers.rb +36 -0
  35. data/lib/sinatra/assetpack/class_methods.rb +82 -0
  36. data/lib/sinatra/assetpack/compressor.rb +54 -0
  37. data/lib/sinatra/assetpack/configurator.rb +21 -0
  38. data/lib/sinatra/assetpack/css.rb +36 -0
  39. data/lib/sinatra/assetpack/engine.rb +20 -0
  40. data/lib/sinatra/assetpack/engines/closure.rb +19 -0
  41. data/lib/sinatra/assetpack/engines/jsmin.rb +10 -0
  42. data/lib/sinatra/assetpack/engines/sass.rb +11 -0
  43. data/lib/sinatra/assetpack/engines/simple.rb +11 -0
  44. data/lib/sinatra/assetpack/engines/sqwish.rb +21 -0
  45. data/lib/sinatra/assetpack/engines/uglify.rb +12 -0
  46. data/lib/sinatra/assetpack/engines/yui.rb +22 -0
  47. data/lib/sinatra/assetpack/hasharray.rb +66 -0
  48. data/lib/sinatra/assetpack/helpers.rb +62 -0
  49. data/lib/sinatra/assetpack/html_helpers.rb +17 -0
  50. data/lib/sinatra/assetpack/image.rb +59 -0
  51. data/lib/sinatra/assetpack/options.rb +329 -0
  52. data/lib/sinatra/assetpack/package.rb +126 -0
  53. data/lib/sinatra/assetpack/rake.rb +29 -0
  54. data/lib/sinatra/assetpack/version.rb +7 -0
  55. data/lib/sinatra/assetpack.rb +61 -0
  56. data/sinatra-assetpack.gemspec +26 -0
  57. data/test/app/.gitignore +1 -0
  58. data/test/app/Rakefile +7 -0
  59. data/test/app/app/css/behavior.htc +1 -0
  60. data/test/app/app/css/js2c.css +494 -0
  61. data/test/app/app/css/screen.sass +9 -0
  62. data/test/app/app/css/sqwishable.css +7 -0
  63. data/test/app/app/css/style.css +3 -0
  64. data/test/app/app/css/stylus.styl +3 -0
  65. data/test/app/app/css_stylus/stylus.styl +3 -0
  66. data/test/app/app/images/background.jpg +1 -0
  67. data/test/app/app/images/email.png +0 -0
  68. data/test/app/app/js/_ignoreme.js +1 -0
  69. data/test/app/app/js/hello.2.js +1 -0
  70. data/test/app/app/js/hello.js +1 -0
  71. data/test/app/app/js/helloe.js +1 -0
  72. data/test/app/app/js/hi.coffee +2 -0
  73. data/test/app/app/js/ugly.js +7 -0
  74. data/test/app/app/js/yoe.coffee +2 -0
  75. data/test/app/app/js_glob/a/b/c1/hello.js +1 -0
  76. data/test/app/app/js_glob/a/b/c2/hi.js +1 -0
  77. data/test/app/app/js_glob/a/b/c2/hola.js +1 -0
  78. data/test/app/app/views/index.haml +1 -0
  79. data/test/app/app.rb +67 -0
  80. data/test/arity_test.rb +26 -0
  81. data/test/build_test.rb +31 -0
  82. data/test/cache_test.rb +9 -0
  83. data/test/combined_test.rb +8 -0
  84. data/test/compressed_test.rb +30 -0
  85. data/test/glob_test.rb +42 -0
  86. data/test/helpers_test.rb +30 -0
  87. data/test/ignore_test.rb +30 -0
  88. data/test/img_test.rb +31 -0
  89. data/test/local_file_test.rb +21 -0
  90. data/test/mime_type_test.rb +33 -0
  91. data/test/non_existent_test.rb +45 -0
  92. data/test/options_test.rb +21 -0
  93. data/test/order_test.rb +20 -0
  94. data/test/preproc_test.rb +28 -0
  95. data/test/redundant_test.rb +11 -0
  96. data/test/simplecss_test.rb +16 -0
  97. data/test/sqwish_test.rb +31 -0
  98. data/test/stylus_test.rb +23 -0
  99. data/test/template_cache_test.rb +29 -0
  100. data/test/test_helper.rb +46 -0
  101. data/test/tilt_test.rb +11 -0
  102. data/test/uglifier_test.rb +23 -0
  103. data/test/unit_test.rb +106 -0
  104. data/test/yui_test.rb +22 -0
  105. metadata +341 -0
data/README.md ADDED
@@ -0,0 +1,656 @@
1
+ # [Sinatra AssetPack](http://ricostacruz.com/sinatra-assetpack)
2
+ #### Asset packer for Sinatra
3
+
4
+ This is *the* most convenient way to set up your CSS/JS (and images) in a
5
+ [Sinatra](http://sinatrarb.com) app. Seriously. No need for crappy routes to
6
+ render Sass or whatever. No-siree!
7
+
8
+ 1. Drop your assets into `/app` like so (you can configure directories don't worry):
9
+ * JavaScript/CoffeeScript files in `/app/js`
10
+ * CSS/Sass/Less/CSS files in `/app/css`
11
+ * Images into `/app/images`
12
+ 3. Add `register Sinatra::AssetPack` and set up options to your app (see below)
13
+ 4. Use `<%= css :application %>` to your layouts. Use this instead of
14
+ messy *script* and *link* tags
15
+ 5. BOOM! You're in business baby!
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
+
34
+ Setup
35
+ -----
36
+
37
+ Install the plugin and add some options. (Feel free to omit the *Optional*
38
+ items, they're listed here for posterity):
39
+
40
+ ``` ruby
41
+ require 'sinatra/assetpack'
42
+
43
+ class App < Sinatra::Base
44
+ set :root, File.dirname(__FILE__)
45
+ register Sinatra::AssetPack
46
+
47
+ assets {
48
+ serve '/js', from: 'app/js' # Optional
49
+ serve '/css', from: 'app/css' # Optional
50
+ serve '/images', from: 'app/images' # Optional
51
+
52
+ # The second parameter defines where the compressed version will be served.
53
+ # (Note: that parameter is optional, AssetPack will figure it out.)
54
+ js :app, '/js/app.js', [
55
+ '/js/vendor/**/*.js',
56
+ '/js/app/**/*.js'
57
+ ]
58
+
59
+ css :application, '/css/application.css', [
60
+ '/css/screen.css'
61
+ ]
62
+
63
+ js_compression :jsmin # Optional
64
+ css_compression :sass # Optional
65
+ }
66
+ end
67
+ ```
68
+
69
+ #### Using in layouts
70
+ In your layouts, use the `css` and `js` helpers:
71
+ *(Use haml? Great! Use `!= css :youreawesome` instead.)*
72
+
73
+ ``` erb
74
+ <%= css :application, :media => 'screen' %>
75
+ <%= js :app %>
76
+ ```
77
+
78
+
79
+ And then what?
80
+ --------------
81
+
82
+ #### Development mode
83
+ If you're on **development** mode, it serves each of the files as so:
84
+
85
+ ``` html
86
+ <link rel='stylesheet' href='/css/screen.849289.css' media='screen' type='text/css' />
87
+ <script type='text/javascript' src='/js/vendor/jquery.283479.js'></script>
88
+ <script type='text/javascript' src='/js/vendor/underscore.589491.js'></script>
89
+ <script type='text/javascript' src='/js/app/main.589491.js'></script>
90
+ ```
91
+
92
+ #### Production mode
93
+ If you're on **production** mode, it serves a compressed version in the URLs you specify:
94
+
95
+ ``` html
96
+ <link rel='stylesheet' href='/css/application.849289.css' media='screen' type='text/css' />
97
+ <script type='text/javascript' src='/js/app.589491.js'></script>
98
+ ```
99
+
100
+ Features
101
+ --------
102
+
103
+ * __CoffeeScript support__ Just add your coffee files in one of the paths
104
+ served (in the example, `app/js/hello.coffee`) and they will be available as JS
105
+ files (`http://localhost:4567/js/hello.js`).
106
+
107
+ * __Sass/Less/SCSS support__ Works the same way. Place your dynamic CSS files
108
+ in there (say, `app/css/screen.sass`) and they will be available as CSS files
109
+ (`http://localhost:4567/css/screen.css`).
110
+
111
+ * __Cache busting__ the `css` and `js` helpers automatically ensures the URL
112
+ is based on when the file was last modified. The URL `/js/jquery.js` may be
113
+ translated to `/js/jquery.8237898.js` to ensure visitors always get the latest
114
+ version.
115
+
116
+ * __Images support__ Image filenames in your CSS will automatically get a
117
+ cache-busting suffix (eg, `/images/icon.742958.png`).
118
+
119
+ * __Embedded images support__ You can embed images in your CSS files as
120
+ `data:` URIs by simply adding `?embed` to the end of your URL.
121
+
122
+ * __No intermediate files needed__ You don't need to generate compiled files.
123
+ You can, but it's optional. Keeps your source repo clean!
124
+
125
+ * __Auto minification (with caching)__ JS and CSS files will be compressed as
126
+ needed.
127
+
128
+ * __Heroku support__ Oh yes. That's right.
129
+
130
+ Compressors
131
+ -----------
132
+
133
+ By default, AssetPack uses [JSMin](http://rubygems.org/gems/jsmin) for JS
134
+ compression, and simple regexes for CSS compression. You can specify other
135
+ compressors in the `assets` block:
136
+
137
+ ``` ruby
138
+ assets {
139
+ js_compression :jsmin # :jsmin | :yui | :closure | :uglify
140
+ css_compression :simple # :simple | :sass | :yui | :sqwish
141
+ }
142
+ ```
143
+
144
+ ### YUI Compressor
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
+
149
+ ``` ruby
150
+ assets {
151
+ js_compression :yui
152
+ js_compression :yui, :munge => true # Munge variable names
153
+
154
+ css_compression :yui
155
+ }
156
+ ```
157
+
158
+ __Note:__ This depends on the `yui-compressor` gem. You will need to install it.
159
+ (`gem install yui-compressor`) If you use Bundler, you will need to add it to
160
+ your Gemfile as well.
161
+
162
+ ``` ruby
163
+ # Gemfile
164
+ gem 'yui-compressor', :require => 'yui/compressor'
165
+ ```
166
+
167
+ ### SASS compression
168
+
169
+ For SASS compression, you need the Sass gem (`gem install sass`). This treats
170
+ the CSS files as Scss files and uses Sass's `:output => :compressed`.
171
+
172
+ ``` ruby
173
+ assets {
174
+ css_compression :sass
175
+ }
176
+ ```
177
+
178
+ __Note:__ This depends on the `sass` gem. You will need to install it (`gem
179
+ install sass`). If you use Bundler, you will need to add it to your Gemfile as
180
+ well.
181
+
182
+ ``` ruby
183
+ # Gemfile
184
+ gem 'sass'
185
+ ```
186
+
187
+ ### Sqwish CSS compression
188
+
189
+ [Sqwish](http://github.com/ded/sqwish) is a NodeJS-based CSS compressor. To use
190
+ Sqwish with AssetPack, install it using `npm install -g sqwish`. You need NodeJS
191
+ and NPM installed.
192
+
193
+ ``` ruby
194
+ assets {
195
+ css_compression :sqwish
196
+ css_compression :sqwish, :strict => true
197
+ }
198
+ ```
199
+
200
+ ### Google Closure compression
201
+
202
+ This uses the [Google closure compiler
203
+ service](http://closure-compiler.appspot.com/home)
204
+ to compress your JavaScript. Available levels are:
205
+
206
+ * `WHITESPACE_ONLY`
207
+ * `SIMPLE_OPTIMIZATIONS`
208
+ * `ADVANCED_OPTIMIZATIONS`
209
+
210
+ ``` ruby
211
+ assets {
212
+ js_compression :closure
213
+ js_compression :closure, :level => "SIMPLE_OPTIMIZATIONS"
214
+ }
215
+ ```
216
+
217
+ ### UglifyJS compression
218
+
219
+ This uses the [UglifyJS](https://github.com/mishoo/UglifyJS) compressor to
220
+ compress your JavaScript. You will need to install the
221
+ [uglifier](http://rubygems.org/gems/uglifier) gem.
222
+
223
+ For options, refer to the [Uglifier
224
+ documentation](https://github.com/lautis/uglifier).
225
+
226
+ ``` ruby
227
+ assets {
228
+ js_compression :uglify
229
+ js_compression :uglify, [options]
230
+ }
231
+ ```
232
+
233
+ __Note:__ This depends on the `uglifier` gem. In your Gemfile, you will need to
234
+ add it. For Heroku support, you will need to add the `therubyracer-heroku` gem
235
+ as well.
236
+
237
+ ``` ruby
238
+ # Gemfile
239
+ gem 'uglifier'
240
+
241
+ # If you're on Heroku:
242
+ gem "therubyracer-heroku", "0.8.1.pre3", :require => false
243
+ ```
244
+
245
+
246
+ Images
247
+ ------
248
+
249
+ To show images, use the `img` helper.
250
+ This automatically adds width, height, and a cache buster thingie.
251
+ ImageMagick is required to generate full image tags with width and height.
252
+
253
+ ``` html
254
+ <!-- Original: --> <%= img '/images/email.png' %>
255
+ <!-- Output: --> <img src='/images/email.873842.png' width='16' height='16' />
256
+ ```
257
+
258
+ #### URL translation
259
+ In your CSS files, `url()`'s will automatically be translated.
260
+
261
+ ``` css
262
+ /* Original: */ .email { background: url(/images/email.png); }
263
+ /* Output: */ .email { background: url(/images/email.6783478.png); }
264
+ ```
265
+
266
+ #### Image embedding
267
+ Want to embed images as `data:` URI's? Sure! Just add `?embed` at the end of the
268
+ URL.
269
+
270
+ ``` css
271
+ /* Original: */ .email { background: url(/images/email.png?embed); }
272
+ /* Output: */ .email { background: url(data:image/png;base64,NF8dG3I...); }
273
+ ```
274
+
275
+ Need to build the files?
276
+ ------------------------
277
+
278
+ Actually, you don't need to—this is optional! But add this to your `Rakefile`:
279
+
280
+ ``` ruby
281
+ # Rakefile
282
+ APP_FILE = 'app.rb'
283
+ APP_CLASS = 'App'
284
+
285
+ require 'sinatra/assetpack/rake'
286
+ ```
287
+
288
+ #### Invoking
289
+ Now invoke the `assetpack:build` Rake task. This will create files in `/public`.
290
+
291
+ $ rake assetpack:build
292
+
293
+
294
+ API reference
295
+ -------------
296
+
297
+ #### Assets block
298
+ All configuration happens in the `assets` block. You may invoke it in 2 ways:
299
+
300
+ ``` ruby
301
+ class App < Sinatra::Base
302
+ register Sinatra::AssetPack
303
+
304
+ # Style 1
305
+ assets do
306
+ css :hello, [ '/css/*.css' ]
307
+ js_compression :yui
308
+ end
309
+
310
+ # Style 2
311
+ assets do |a|
312
+ a.css :hello, ['/css/*.css' ]
313
+ a.js_compression :yui
314
+ end
315
+ end
316
+ ```
317
+
318
+ #### Getting options
319
+ Invoking it without a block allows you to access the options. This works for
320
+ almost all the options, with the exception for `css`, `js` and `serve`.
321
+
322
+ ``` ruby
323
+ App.assets
324
+ App.assets.js_compression #=> :yui
325
+ ```
326
+
327
+ ### assets.serve
328
+
329
+ Serves files from `LOCALPATH` in the URI path `PATH`. Both parameters are
330
+ required.
331
+
332
+ ``` ruby
333
+ # Usage
334
+ serve 'PATH', :from => 'LOCALPATH'
335
+ ```
336
+
337
+ #### Example
338
+ This makes `/app/javascripts/vendor/jquery.js`
339
+ available as `http://localhost:4567/js/vendor/jquery.js`.
340
+
341
+ ``` ruby
342
+ serve '/js', from: '/app/javascripts'
343
+ ```
344
+
345
+ ### assets.js\_compression<br>assets.css\_compression
346
+
347
+ Sets the compression engine to use for JavaScript or CSS. This defaults to
348
+ `:jsmin` and `:simple`, respectively.
349
+
350
+ If `OPTIONS_HASH` is given as a hash, it sets options for the engine to use.
351
+
352
+ ``` ruby
353
+ # Usage:
354
+ assets {
355
+ js_compression :ENGINE
356
+ js_compression :ENGINE, OPTIONS_HASH
357
+ css_compression :ENGINE
358
+ css_compression :ENGINE, OPTIONS_HASH
359
+ }
360
+ ```
361
+
362
+ #### Examples
363
+ Yo seriously check this out: the first line uses Sqwish with it's defaults, and
364
+ the second line uses Sqwish with it's magic.
365
+
366
+ ``` ruby
367
+ assets {
368
+ css_compression :sqwish
369
+ css_compression :sqwish, :strict => true
370
+ }
371
+ ```
372
+
373
+ ### assets.js\_compression\_options<br>assets.css\_compression\_options
374
+
375
+ Sets the options for the compression engine to use. This is usually not needed
376
+ as you can already set options using `js_compression` and `css_compression`.
377
+
378
+ ``` ruby
379
+ # Usage:
380
+ assets {
381
+ js_compression_options HASH
382
+ css_compression_options HASH
383
+ }
384
+ ```
385
+
386
+ #### Example
387
+ This sets the option for `:munge` for the CSS compression engine.
388
+
389
+ ``` ruby
390
+ css_compression_options :munge => true
391
+ ```
392
+
393
+ ### assets.css<br>assets.js
394
+
395
+ Adds packages to be used.
396
+
397
+ The `NAME` is a symbol defines the ID for that given package that you can use
398
+ for the helpers. That is, If a CSS package was defined as `css :main, [ ... ]`,
399
+ then you will need to use `<%= css :main %>` to render it in views.
400
+
401
+ the `URI` is a string that defines where the compressed version will be served.
402
+ It is optional. If not provided, it will default to `"/assets/name.type"` (eg:
403
+ `/assets/main.css`).
404
+
405
+ the `PATHs` is an array that defines files that will be served. Take note that
406
+ this is an array of URI paths, not local paths.
407
+
408
+ If a `PATH` contains wildcards, it will be expanded in alphabetical order.
409
+ Redundancies will be taken care of.
410
+
411
+ ``` ruby
412
+ # Usage:
413
+ assets {
414
+ css :NAME, [ PATH1, PATH2, ... ]
415
+ css :NAME, 'URI', [ PATH1, PATH2, ... ]
416
+ js:NAME, [ PATH1, PATH2, ... ]
417
+ js:NAME, 'URI', [ PATH1, PATH2, ... ]
418
+ }
419
+ ```
420
+
421
+ #### Example
422
+ In this example, JavaScript files will be served compressed as
423
+ `/js/application.js` (default since no `URI` is given). The files will be taken
424
+ from `./app/javascripts/vendor/jquery*.js`.
425
+
426
+ ``` ruby
427
+ class App < Sinatra::Base
428
+ assets {
429
+ serve '/js', from: '/app/javascripts'
430
+ js :application, [
431
+ '/js/vendor/jquery.*.js',
432
+ '/js/vendor/jquery.js'
433
+ ]
434
+ }
435
+ end
436
+
437
+ # In views: <%= js :application %>
438
+ ```
439
+
440
+ ### assets.ignore
441
+ Excludes any URL paths that match the given spec.
442
+
443
+ These files will not show up in packages, and they will not be accessible.
444
+
445
+ By default, `.*` and `_*` are ignored. The former protects folders such as
446
+ `.svn` from being accessed, and the latter protects Sass partial files from
447
+ being accessed directly.
448
+
449
+ Note that this matches against URL paths, not local file paths. This means
450
+ something like `*.scss` will not work, as all stylesheet files will be compiled
451
+ to `.css`.
452
+
453
+ ``` ruby
454
+ # Usage:
455
+ assets {
456
+ ignore FILESPEC
457
+ }
458
+ ```
459
+
460
+ #### Example
461
+ Here's an example.
462
+
463
+ ``` ruby
464
+ class App < Sinatra::Base
465
+ assets {
466
+ # Ignores all files matching *.private.js in any folder.
467
+ ignore '*.private.js'
468
+
469
+ # Ignores all files in `/app/js/foo/**/*`
470
+ ignore '/js/foo'
471
+ }
472
+ end
473
+ ```
474
+
475
+ #### Advanced usage
476
+ By default, `.*` and `_*` are ignored. To disable this behavior, you can use
477
+ `clear_ignores!` before your `ignore` lines.
478
+
479
+ ``` ruby
480
+ assets {
481
+ clear_ignores!
482
+ ignore '*.private.js'
483
+ }
484
+ ```
485
+
486
+ To check if a certain file is ignored, use `assets.ignore?`
487
+
488
+ ``` ruby
489
+ assets.ignored?("/css/_chrome.css") #=> true
490
+ ```
491
+
492
+
493
+ ### assets.prebuild
494
+ Caches the built packages on application startup.
495
+
496
+ If this is not used, the packages will be minified when they are first
497
+ requested. This only has an effect in the production environment (or when
498
+ Sinatra's `reload_templates` is otherwise set to false).
499
+
500
+ ``` ruby
501
+ # Usage:
502
+ prebuild {true|false}
503
+ ```
504
+
505
+ #### Example
506
+ In this example, the package for `:application` will be built when the
507
+ application is started in the production environment.
508
+
509
+ ``` ruby
510
+ class App < Sinatra::Base
511
+ assets {
512
+ js_compression :closure
513
+
514
+ js :application, [
515
+ '/js/vendor/jquery.*.js',
516
+ '/js/vendor/jquery.js'
517
+ ]
518
+ prebuild true
519
+ }
520
+ end
521
+
522
+ # $ RACK_ENV=production ruby app.rb
523
+ # ** Building /assets/application.js...
524
+ # == Sinatra/1.2.6 has taken the stage on 4567 for production
525
+ # >> Thin web server (v1.2.11 codename Bat-Shit Crazy)
526
+ # >> Maximum connections set to 1024
527
+ # >> Listening on 0.0.0.0:4567, CTRL+C to stop
528
+ ```
529
+
530
+ API reference: helpers
531
+ ----------------------
532
+
533
+ These are helpers you can use in your views.
534
+
535
+ ### <%= css %>
536
+
537
+ Shows a CSS package named `PACKAGE`. If `OPTIONS_HASH` is given, they will we
538
+ passed onto the `<link>` tag to be generated as attributes.
539
+
540
+ You may specify as many packages as you need, as shown in the second usage line.
541
+
542
+ ``` ruby
543
+ # Usage:
544
+ <%= css :PACKAGE %>
545
+ <%= css :PACKAGE_1, :PACKAGE_2, ... :PACKAGE_N, OPTIONS_HASH %>
546
+ <%= css :PACKAGE, OPTIONS_HASH %>
547
+ ```
548
+
549
+ #### Example 1
550
+ This links to the `main` stylesheet for *screen* media.
551
+
552
+ ``` erb
553
+ <%= css :main, media: 'screen' %>
554
+
555
+ <!-- Output: -->
556
+ <link rel='stylesheet' type='text/css' href='/css/main.873984.css' media='screen' />
557
+ ```
558
+
559
+ #### Example 2
560
+ You may also invoke it with multiple packages.
561
+
562
+ ``` erb
563
+ <%= css :base, :app, :main, media: 'screen' %>
564
+
565
+ <!-- Output: -->
566
+ <link rel='stylesheet' type='text/css' href='/css/base.873984.css' media='screen' />
567
+ <link rel='stylesheet' type='text/css' href='/css/app.873984.css' media='screen' />
568
+ <link rel='stylesheet' type='text/css' href='/css/main.873984.css' media='screen' />
569
+ ```
570
+
571
+ ### <%= js %>
572
+
573
+ Same as `css`, but obviously for JavaScript. You may also specify as many packages as you need, just with `css`.
574
+
575
+ ``` erb
576
+ # Usage:
577
+ <%= js :PACKAGE %>
578
+ <%= js :PACKAGE_1, :PACKAGE_2, ... :PACKAGE_N, OPTIONS_HASH %>
579
+ <%= js :PACKAGE, OPTIONS_HASH %>
580
+ ```
581
+
582
+ #### Example
583
+ This example embeds the *main* package with an ID.
584
+
585
+ ``` erb
586
+ <%= js :main, id: 'main_script' %>
587
+
588
+ <!-- Output: -->
589
+ <script type='text/javascript' src='/js/main.783439.js' id='main_script'></script>
590
+ ```
591
+
592
+ ### <%= img %>
593
+
594
+ Shows an `<img>` tag from the given `SRC`. If the images is found in the asset
595
+ directories (and ImageMagick is available), `width` and `height` attributes will
596
+ be added.
597
+
598
+ ``` ruby
599
+ # Usage:
600
+ img 'SRC'
601
+ img 'SRC', OPTIONS_HASH
602
+ ```
603
+
604
+ If `OPTIONS_HASH` is given, they will we passed onto the `<img>` tag to be
605
+ generated as attributes.
606
+
607
+ #### Example
608
+ This example renders an image with an alt tag.
609
+
610
+ ``` erb
611
+ <%= img '/images/icon.png', alt: 'Icon' %>
612
+
613
+ <!-- Output: -->
614
+ <img src='/images/icon.834782.png' width='24' height='24' alt='Icon' />`
615
+ ```
616
+
617
+ Need Compass support?
618
+ ---------------------
619
+
620
+ No, AssetPack doesn't have built-in [Compass](http://compass-style.org) support,
621
+ but you can use [Sinatra Support](http://sinefunc.com/sinatra-support).
622
+
623
+ For an example of how to use AssetPack with Compass, including on how to use it
624
+ to generate image [sprites][compsprite], see the [Compass example
625
+ application.][compex]
626
+
627
+ [compex]: https://github.com/rstacruz/sinatra-assetpack/tree/master/examples/compass
628
+ [compsprite]: http://compass-style.org/reference/compass/utilities/sprites/
629
+
630
+ ``` ruby
631
+ # gem install sinatra/support
632
+ Encoding.default_external = 'utf-8'
633
+ require 'sinatra/support'
634
+
635
+ class Main
636
+ register Sinatra::CompassSupport
637
+ end
638
+ ```
639
+
640
+ Acknowledgements
641
+ ----------------
642
+
643
+ © 2011, Rico Sta. Cruz. Released under the [MIT
644
+ License](http://www.opensource.org/licenses/mit-license.php).
645
+
646
+ Sinatra-AssetPack is authored and maintained by [Rico Sta. Cruz][rsc] with help
647
+ from it's [contributors][c]. It is sponsored by my startup, [Sinefunc, Inc][sf].
648
+
649
+ * [My website](http://ricostacruz.com) (ricostacruz.com)
650
+ * [Sinefunc, Inc.](http://sinefunc.com) (sinefunc.com)
651
+ * [Github](http://github.com/rstacruz) (@rstacruz)
652
+ * [Twitter](http://twitter.com/rstacruz) (@rstacruz)
653
+
654
+ [rsc]: http://ricostacruz.com
655
+ [c]: http://github.com/rstacruz/sinatra-assetpack/contributors
656
+ [sf]: http://sinefunc.com
data/Rakefile ADDED
@@ -0,0 +1,31 @@
1
+ desc "Invokes the test suite in multiple RVM environments"
2
+ task :'test!' do
3
+ # Override this by adding RVM_TEST_ENVS=".." in .rvmrc
4
+ envs = ENV['RVM_TEST_ENVS'] || '1.9.2@sinatra,1.8.7@sinatra'
5
+ puts "* Testing in the following RVM environments: #{envs.gsub(',', ', ')}"
6
+ system "rvm #{envs} rake test" or abort
7
+ end
8
+
9
+ desc "Runs tests"
10
+ task :test do
11
+ Dir['test/*_test.rb'].each { |f| load f }
12
+ end
13
+
14
+ task :default => :test
15
+
16
+ gh = "rstacruz/sinatra-assetpack"
17
+ namespace :doc do
18
+ # http://github.com/rstacruz/reacco
19
+ desc "Builds the documentation into doc/"
20
+ task :build do
21
+ system "reacco -a --github #{gh} --css docsrc/style.css"
22
+ end
23
+
24
+ # http://github.com/rstacruz/git-update-ghpages
25
+ desc "Posts documentation to GitHub pages"
26
+ task :deploy => :build do
27
+ system "git update-ghpages #{gh} -i doc/"
28
+ end
29
+ end
30
+
31
+ task :doc => :'doc:build'
data/docsrc/style.css ADDED
@@ -0,0 +1,32 @@
1
+ section.features {
2
+ background: #f6f6ff;
3
+ overflow: hidden; }
4
+
5
+ h2 {
6
+ font-size: 26pt; }
7
+
8
+ section.features h2 {
9
+ font-size: 32pt; }
10
+
11
+ section.features ul {
12
+ max-width: none;
13
+ margin-left: 0;
14
+ padding-left: 0;
15
+ width: 100%; }
16
+
17
+ section.features li {
18
+ list-style-type: none;
19
+ width: 420px;
20
+ float: left; margin-right: 40px; }
21
+
22
+ section.features li:nth-child(odd) {
23
+ clear: both; }
24
+
25
+ section.features li>p>strong {
26
+ font-family: shanti, sans-serif;
27
+ font-weight: normal;
28
+ font-size: 1.2em;
29
+ text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.1);
30
+ display: block;
31
+ margin-bottom: 5px;
32
+ color: #88a; }
@@ -0,0 +1 @@
1
+ public