sinatra-assetpack 0.0.5
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 +1 -0
- data/Gemfile +2 -0
- data/HISTORY.md +45 -0
- data/README.md +248 -0
- data/Rakefile +3 -0
- data/example/.gitignore +1 -0
- data/example/Rakefile +7 -0
- data/example/app.rb +28 -0
- data/example/app/css/test.sass +11 -0
- data/example/app/images/icon.png +0 -0
- data/example/app/js/app.js +3 -0
- data/example/app/js/vendor/jquery.js +2 -0
- data/example/app/js/vendor/jquery.plugin.js +2 -0
- data/example/app/js/vendor/underscore.js +2 -0
- data/example/views/index.erb +26 -0
- data/lib/sinatra/assetpack.rb +55 -0
- data/lib/sinatra/assetpack/buster_helpers.rb +21 -0
- data/lib/sinatra/assetpack/class_methods.rb +68 -0
- data/lib/sinatra/assetpack/compressor.rb +109 -0
- data/lib/sinatra/assetpack/configurator.rb +15 -0
- data/lib/sinatra/assetpack/css.rb +35 -0
- data/lib/sinatra/assetpack/hasharray.rb +70 -0
- data/lib/sinatra/assetpack/helpers.rb +48 -0
- data/lib/sinatra/assetpack/html_helpers.rb +17 -0
- data/lib/sinatra/assetpack/image.rb +37 -0
- data/lib/sinatra/assetpack/options.rb +223 -0
- data/lib/sinatra/assetpack/package.rb +111 -0
- data/lib/sinatra/assetpack/rake.rb +23 -0
- data/lib/sinatra/assetpack/version.rb +7 -0
- data/sinatra-assetpack.gemspec +23 -0
- data/test/app/.gitignore +1 -0
- data/test/app/Rakefile +7 -0
- data/test/app/app.rb +51 -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 +2 -0
- data/test/app/app/images/background.jpg +1 -0
- data/test/app/app/images/email.png +0 -0
- data/test/app/app/js/hello.js +1 -0
- data/test/app/app/js/hi.coffee +2 -0
- data/test/app/app/views/index.haml +1 -0
- data/test/build_test.rb +20 -0
- data/test/cache_test.rb +10 -0
- data/test/helpers_test.rb +23 -0
- data/test/img_test.rb +13 -0
- data/test/options_test.rb +17 -0
- data/test/order_test.rb +21 -0
- data/test/preproc_test.rb +23 -0
- data/test/simplecss_test.rb +16 -0
- data/test/sqwish_test.rb +29 -0
- data/test/test_helper.rb +38 -0
- data/test/unit_test.rb +96 -0
- data/test/yui_test.rb +22 -0
- metadata +200 -0
data/.gitignore
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
/Gemfile.lock
|
data/Gemfile
ADDED
data/HISTORY.md
ADDED
@@ -0,0 +1,45 @@
|
|
1
|
+
v0.0.5 - Aug 30, 2011
|
2
|
+
---------------------
|
3
|
+
|
4
|
+
### Fixed:
|
5
|
+
* Fix build failing when it finds directories.
|
6
|
+
|
7
|
+
### Added:
|
8
|
+
* Added an example app in `example/`.
|
9
|
+
|
10
|
+
v0.0.4 - Aug 30, 2011
|
11
|
+
---------------------
|
12
|
+
|
13
|
+
### Fixed:
|
14
|
+
* Ruby 1.8 compatibility. Yay!
|
15
|
+
* Fixed images always being square.
|
16
|
+
* Assets are now ordered properly.
|
17
|
+
|
18
|
+
### Changed:
|
19
|
+
* the config format for `js_compression` and family. In your `assets` block,
|
20
|
+
you now have to use `js_compression :closure` instead of `js_compression =
|
21
|
+
:closure`.
|
22
|
+
* Use simple CSS compression by default.
|
23
|
+
|
24
|
+
v0.0.3 - Aug 30, 2011
|
25
|
+
---------------------
|
26
|
+
|
27
|
+
### Added:
|
28
|
+
* Images in CSS defined in `url(...)` params are now cache-busted.
|
29
|
+
* Add support for embedded images in CSS.
|
30
|
+
* `rake assetpack:build` now also outputs images.
|
31
|
+
|
32
|
+
v0.0.2 - Aug 29, 2011
|
33
|
+
---------------------
|
34
|
+
|
35
|
+
### Added:
|
36
|
+
* Added the `img` helper.
|
37
|
+
* Added support for filetypes used in @font-face.
|
38
|
+
|
39
|
+
### Fixed:
|
40
|
+
* The gem now installs the correct dependencies.
|
41
|
+
|
42
|
+
v0.0.1 - Aug 29, 2011
|
43
|
+
---------------------
|
44
|
+
|
45
|
+
Initial release.
|
data/README.md
ADDED
@@ -0,0 +1,248 @@
|
|
1
|
+
# 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 app. Seriously. No need for crappy routes to render Sass or whatever.
|
6
|
+
No-siree!
|
7
|
+
|
8
|
+
1. Drop your JavaScript/CoffeeScript files in `/app/js`
|
9
|
+
2. Drop your CSS/sass/less/scss files in `/app/css`
|
10
|
+
3. Add `register Sinatra::AssetPack` and set up options to your app
|
11
|
+
4. Use `<%= css :application %>` to your layouts instead of messy *<script>* and
|
12
|
+
*<link>* tags
|
13
|
+
5. BOOM! You're in business baby!
|
14
|
+
|
15
|
+
Setup
|
16
|
+
-----
|
17
|
+
|
18
|
+
* Bundler: `gem 'sinatra-assetpack'`
|
19
|
+
* Else: `$ gem install sinatra-assetpack`
|
20
|
+
|
21
|
+
Install the plugin and add some options. (Feel free to omit the *Optional*
|
22
|
+
items, they're listed here for posterity):
|
23
|
+
|
24
|
+
``` ruby
|
25
|
+
require 'sinatra/assetpack'
|
26
|
+
|
27
|
+
class Main < Sinatra::Base
|
28
|
+
set :root, File.dirname(__FILE__)
|
29
|
+
register Sinatra::AssetPack
|
30
|
+
|
31
|
+
assets {
|
32
|
+
serve '/js', from: 'app/js' # Optional
|
33
|
+
serve '/css', from: 'app/css' # Optional
|
34
|
+
serve '/images', from: 'app/images' # Optional
|
35
|
+
|
36
|
+
js :app, '/js/app.js', [
|
37
|
+
'/js/vendor/**/*.js',
|
38
|
+
'/js/app/**/*.js'
|
39
|
+
]
|
40
|
+
|
41
|
+
css :application, '/css/application.css', [
|
42
|
+
'/css/screen.css'
|
43
|
+
]
|
44
|
+
|
45
|
+
js_compression :jsmin # Optional
|
46
|
+
css_compression :sass # Optional
|
47
|
+
}
|
48
|
+
end
|
49
|
+
```
|
50
|
+
|
51
|
+
In your layouts:
|
52
|
+
|
53
|
+
``` erb
|
54
|
+
<%= css :application, :media => 'screen' %>
|
55
|
+
<%= js :app %>
|
56
|
+
```
|
57
|
+
|
58
|
+
*(Use haml? Great! Use `!= css :youreawesome`.)*
|
59
|
+
|
60
|
+
And then what?
|
61
|
+
--------------
|
62
|
+
|
63
|
+
If you're on **development** mode, it serves each of the files as so:
|
64
|
+
|
65
|
+
``` html
|
66
|
+
<link rel='stylesheet' href='/css/screen.849289.css' media='screen' type='text/css' />
|
67
|
+
<script type='text/javascript' src='/js/vendor/jquery.283479.js'></script>
|
68
|
+
<script type='text/javascript' src='/js/vendor/underscore.589491.js'></script>
|
69
|
+
<script type='text/javascript' src='/js/app/main.589491.js'></script>
|
70
|
+
```
|
71
|
+
|
72
|
+
If you're on **production** mode, it serves a compressed version in the URLs you specify:
|
73
|
+
|
74
|
+
``` html
|
75
|
+
<link rel='stylesheet' href='/css/application.849289.css' media='screen' type='text/css' />
|
76
|
+
<script type='text/javascript' src='/js/app.589491.js'></script>
|
77
|
+
```
|
78
|
+
|
79
|
+
Features
|
80
|
+
--------
|
81
|
+
|
82
|
+
* __CoffeeScript support__: Just add your coffee files in one of the paths
|
83
|
+
served (in the example, `app/js/hello.coffee`) and they will be available as JS
|
84
|
+
files (`http://localhost:4567/js/hello.js`).
|
85
|
+
|
86
|
+
* __Sass/Less/SCSS support__: Works the same way. Place your dynamic CSS files
|
87
|
+
in there (say, `app/css/screen.sass`) and they will be available as CSS files
|
88
|
+
(`http://localhost:4567/css/screen.css`).
|
89
|
+
|
90
|
+
* __Cache busting__: the `css` and `js` helpers automatically ensures the URL
|
91
|
+
is based on when the file was last modified. The URL `/js/jquery.js` may be
|
92
|
+
translated to `/js/jquery.8237898.js` to ensure visitors always get the latest
|
93
|
+
version.
|
94
|
+
|
95
|
+
* __Images support__: Image filenames in your CSS will automatically get a
|
96
|
+
cache-busting suffix (eg, `/images/icon.742958.png`).
|
97
|
+
|
98
|
+
* __Embedded images support__: You can embed images in your CSS files as
|
99
|
+
`data:` URIs by simply adding `?embed` to the end of your URL.
|
100
|
+
|
101
|
+
* __No intermediate files needed__: You don't need to generate compiled files.
|
102
|
+
You can, but it's optional. Keeps your source repo clean!
|
103
|
+
|
104
|
+
* __Auto minification (with caching)__: JS and CSS files will be compressed as
|
105
|
+
needed.
|
106
|
+
|
107
|
+
* __Heroku support__: Oh yes. That's right.
|
108
|
+
|
109
|
+
Compressors
|
110
|
+
-----------
|
111
|
+
|
112
|
+
By default, AssetPack uses [JSMin](http://rubygems.org/gems/jsmin) for JS
|
113
|
+
minifaction, and simple regexes for CSS minification. You can specify other
|
114
|
+
compressors in the `assets` block:
|
115
|
+
|
116
|
+
``` ruby
|
117
|
+
assets {
|
118
|
+
js_compression :jsmin # :jsmin | :yui | :closure
|
119
|
+
css_compression :simple # :simple | :sass | :yui | :sqwish
|
120
|
+
}
|
121
|
+
```
|
122
|
+
|
123
|
+
|
124
|
+
### YUI Compressor
|
125
|
+
|
126
|
+
``` ruby
|
127
|
+
assets {
|
128
|
+
js_compression :yui
|
129
|
+
css_compression :yui
|
130
|
+
js_compression_options { :munge => true } # Munge variable names
|
131
|
+
}
|
132
|
+
```
|
133
|
+
|
134
|
+
For YUI compression, you need the YUI compressor gem.
|
135
|
+
|
136
|
+
* Bundler? Add to *Gemfile*: `gem 'yui-compressor', :require => 'yui/compressor'`
|
137
|
+
* Else, `gem install yui-compressor`
|
138
|
+
|
139
|
+
### SASS compression
|
140
|
+
|
141
|
+
``` ruby
|
142
|
+
assets {
|
143
|
+
css_compression :sass
|
144
|
+
}
|
145
|
+
```
|
146
|
+
|
147
|
+
For SASS compression, you need the Sass gem.
|
148
|
+
|
149
|
+
* Bundler? Add to *Gemfile*: `gem 'sass'`
|
150
|
+
* Else, `gem install sass`
|
151
|
+
|
152
|
+
### Sqwish CSS compression
|
153
|
+
|
154
|
+
``` ruby
|
155
|
+
assets {
|
156
|
+
css_compression :sqwish
|
157
|
+
css_compression_options { :strict => true }
|
158
|
+
}
|
159
|
+
```
|
160
|
+
|
161
|
+
[Sqwish](http://github.com/ded/sqwish) is a NodeJS-based CSS compressor. To use
|
162
|
+
Sqwish with AssetPack, install it using `npm install -g sqwish`. You need NodeJS
|
163
|
+
and NPM installed.
|
164
|
+
|
165
|
+
### Google Closure compression
|
166
|
+
|
167
|
+
``` ruby
|
168
|
+
assets {
|
169
|
+
js_compression :closure
|
170
|
+
js_compression_options { :level => "SIMPLE_OPTIMIZATIONS" }
|
171
|
+
}
|
172
|
+
```
|
173
|
+
|
174
|
+
This uses the [Google closure compiler service](http://closure-compiler.appspot.com/home)
|
175
|
+
to compress your JavaScript.
|
176
|
+
|
177
|
+
Available levels: `WHITESPACE_ONLY`, `SIMPLE_OPTIMIZATIONS`, `ADVANCED_OPTIMIZATIONS`
|
178
|
+
|
179
|
+
Images
|
180
|
+
------
|
181
|
+
|
182
|
+
To show images, use the `img` helper.
|
183
|
+
This automatically adds width, height, and a cache buster thingie.
|
184
|
+
|
185
|
+
``` html
|
186
|
+
<!-- Original: --> <%= img '/images/email.png' %>
|
187
|
+
<!-- Output: --> <img src='/images/email.873842.png' width='16' height='16' />
|
188
|
+
```
|
189
|
+
|
190
|
+
In your CSS files, `url()`'s will automatically be translated.
|
191
|
+
|
192
|
+
``` css
|
193
|
+
/* Original: */ .email { background: url(/images/email.png); }
|
194
|
+
/* Output: */ .email { background: url(/images/email.6783478.png); }
|
195
|
+
```
|
196
|
+
|
197
|
+
Want to embed images as `data:` URI's? Sure! Just add `?embed` at the end of the
|
198
|
+
URL.
|
199
|
+
|
200
|
+
``` css
|
201
|
+
/* Original: */ .email { background: url(/images/email.png?embed); }
|
202
|
+
/* Output: */ .email { background: url(data:image/png;base64,NF8dG3I...); }
|
203
|
+
```
|
204
|
+
|
205
|
+
Need to build the files?
|
206
|
+
------------------------
|
207
|
+
|
208
|
+
Actually, you don't need to--this is optional! But add this to your Rakefile:
|
209
|
+
|
210
|
+
``` ruby
|
211
|
+
APP_FILE = 'app.rb'
|
212
|
+
APP_CLASS = 'Main'
|
213
|
+
|
214
|
+
require 'sinatra/assetpack/rake'
|
215
|
+
```
|
216
|
+
|
217
|
+
Now:
|
218
|
+
|
219
|
+
$ rake assetpack:build
|
220
|
+
|
221
|
+
This will create files in `/public`.
|
222
|
+
|
223
|
+
Need Compass support?
|
224
|
+
---------------------
|
225
|
+
|
226
|
+
No, AssetPack doesn't have built-in Compass support, but you can use [Sinatra
|
227
|
+
Support](http://sinefunc.com/sinatra-support):
|
228
|
+
|
229
|
+
``` ruby
|
230
|
+
# gem install sinatra/support
|
231
|
+
Encoding.default_external = 'utf-8'
|
232
|
+
require 'sinatra/support'
|
233
|
+
|
234
|
+
class Main
|
235
|
+
register Sinatra::CompassSupport
|
236
|
+
end
|
237
|
+
```
|
238
|
+
|
239
|
+
To do
|
240
|
+
-----
|
241
|
+
|
242
|
+
AssetPack will eventually have:
|
243
|
+
|
244
|
+
* `rake assetpack:build` should be able to output to another folder
|
245
|
+
* Cache folder support (best if your app has many workers)
|
246
|
+
* Refactor *Compressor* module
|
247
|
+
* CDN (Cloudfront, S3) support
|
248
|
+
* Better support for Compass sprites
|
data/Rakefile
ADDED
data/example/.gitignore
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
public
|
data/example/Rakefile
ADDED
data/example/app.rb
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
$:.unshift File.expand_path('../../lib', __FILE__)
|
2
|
+
|
3
|
+
require 'sinatra/base'
|
4
|
+
require 'sinatra/assetpack'
|
5
|
+
|
6
|
+
class App < Sinatra::Base
|
7
|
+
set :root, File.dirname(__FILE__)
|
8
|
+
register Sinatra::AssetPack
|
9
|
+
|
10
|
+
assets do
|
11
|
+
js :main, '/js/main.js', [
|
12
|
+
'/js/vendor/*.js',
|
13
|
+
'/js/app.js'
|
14
|
+
]
|
15
|
+
|
16
|
+
css :main, '/css/main.css', [
|
17
|
+
'/css/*.css'
|
18
|
+
]
|
19
|
+
end
|
20
|
+
|
21
|
+
get '/' do
|
22
|
+
erb :index
|
23
|
+
end
|
24
|
+
end
|
25
|
+
|
26
|
+
if __FILE__ == $0
|
27
|
+
App.run!
|
28
|
+
end
|
Binary file
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
<meta charset="UTF-8" />
|
5
|
+
<title></title>
|
6
|
+
|
7
|
+
<!-- These should include all the JS files defined in the app. -->
|
8
|
+
<%= js :main %>
|
9
|
+
<%= css :main %>
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<h1>Hello!</h1>
|
13
|
+
<h4>View the source of this file to see the JS files as they were included.</h4>
|
14
|
+
|
15
|
+
<h3>Image test:</h3>
|
16
|
+
|
17
|
+
<!-- This should have width and height. -->
|
18
|
+
<%= img '/images/icon.png' %>
|
19
|
+
|
20
|
+
<h3>Image embedding test:</h3>
|
21
|
+
<div id="image_embedding_test">
|
22
|
+
<!-- This should have a CSS background that uses a data: URI. -->
|
23
|
+
<!-- Inspect that <div> to see. -->
|
24
|
+
</div>
|
25
|
+
</body>
|
26
|
+
</html>
|
@@ -0,0 +1,55 @@
|
|
1
|
+
require 'rack/test'
|
2
|
+
|
3
|
+
module Sinatra
|
4
|
+
module AssetPack
|
5
|
+
def self.registered(app)
|
6
|
+
unless app.root?
|
7
|
+
raise Error, "Please set :root in your Sinatra app."
|
8
|
+
end
|
9
|
+
|
10
|
+
app.extend ClassMethods
|
11
|
+
app.helpers Helpers
|
12
|
+
end
|
13
|
+
|
14
|
+
# Returns a list of formats that can be served.
|
15
|
+
# Anything not in this list will be rejected.
|
16
|
+
def self.supported_formats
|
17
|
+
@supported_formats ||= %w(css js png jpg gif otf eot ttf woff)
|
18
|
+
end
|
19
|
+
|
20
|
+
# Returns a map of what MIME format each Tilt type returns.
|
21
|
+
def self.tilt_formats
|
22
|
+
@formats ||= {
|
23
|
+
'scss' => 'css',
|
24
|
+
'sass' => 'css',
|
25
|
+
'less' => 'css',
|
26
|
+
'coffee' => 'js'
|
27
|
+
}
|
28
|
+
end
|
29
|
+
|
30
|
+
# Returns the inverse of tilt_formats.
|
31
|
+
def self.tilt_formats_reverse
|
32
|
+
re = Hash.new { |h, k| h[k] = Array.new }
|
33
|
+
formats.each { |tilt, out| re[out] << tilt }
|
34
|
+
out
|
35
|
+
end
|
36
|
+
|
37
|
+
PREFIX = File.dirname(__FILE__)
|
38
|
+
|
39
|
+
autoload :ClassMethods, "#{PREFIX}/assetpack/class_methods"
|
40
|
+
autoload :Options, "#{PREFIX}/assetpack/options"
|
41
|
+
autoload :Helpers, "#{PREFIX}/assetpack/helpers"
|
42
|
+
autoload :HtmlHelpers, "#{PREFIX}/assetpack/html_helpers"
|
43
|
+
autoload :BusterHelpers, "#{PREFIX}/assetpack/buster_helpers"
|
44
|
+
autoload :Package, "#{PREFIX}/assetpack/package"
|
45
|
+
autoload :Compressor, "#{PREFIX}/assetpack/compressor"
|
46
|
+
autoload :Image, "#{PREFIX}/assetpack/image"
|
47
|
+
autoload :Css, "#{PREFIX}/assetpack/css"
|
48
|
+
autoload :Configurator, "#{PREFIX}/assetpack/configurator"
|
49
|
+
autoload :HashArray, "#{PREFIX}/assetpack/hasharray"
|
50
|
+
|
51
|
+
Error = Class.new(StandardError)
|
52
|
+
|
53
|
+
require "#{PREFIX}/assetpack/version"
|
54
|
+
end
|
55
|
+
end
|