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