sinatra-assetpack 0.0.5
Sign up to get free protection for your applications and to get access to all the features.
- 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
|