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.
Files changed (55) hide show
  1. data/.gitignore +1 -0
  2. data/Gemfile +2 -0
  3. data/HISTORY.md +45 -0
  4. data/README.md +248 -0
  5. data/Rakefile +3 -0
  6. data/example/.gitignore +1 -0
  7. data/example/Rakefile +7 -0
  8. data/example/app.rb +28 -0
  9. data/example/app/css/test.sass +11 -0
  10. data/example/app/images/icon.png +0 -0
  11. data/example/app/js/app.js +3 -0
  12. data/example/app/js/vendor/jquery.js +2 -0
  13. data/example/app/js/vendor/jquery.plugin.js +2 -0
  14. data/example/app/js/vendor/underscore.js +2 -0
  15. data/example/views/index.erb +26 -0
  16. data/lib/sinatra/assetpack.rb +55 -0
  17. data/lib/sinatra/assetpack/buster_helpers.rb +21 -0
  18. data/lib/sinatra/assetpack/class_methods.rb +68 -0
  19. data/lib/sinatra/assetpack/compressor.rb +109 -0
  20. data/lib/sinatra/assetpack/configurator.rb +15 -0
  21. data/lib/sinatra/assetpack/css.rb +35 -0
  22. data/lib/sinatra/assetpack/hasharray.rb +70 -0
  23. data/lib/sinatra/assetpack/helpers.rb +48 -0
  24. data/lib/sinatra/assetpack/html_helpers.rb +17 -0
  25. data/lib/sinatra/assetpack/image.rb +37 -0
  26. data/lib/sinatra/assetpack/options.rb +223 -0
  27. data/lib/sinatra/assetpack/package.rb +111 -0
  28. data/lib/sinatra/assetpack/rake.rb +23 -0
  29. data/lib/sinatra/assetpack/version.rb +7 -0
  30. data/sinatra-assetpack.gemspec +23 -0
  31. data/test/app/.gitignore +1 -0
  32. data/test/app/Rakefile +7 -0
  33. data/test/app/app.rb +51 -0
  34. data/test/app/app/css/js2c.css +494 -0
  35. data/test/app/app/css/screen.sass +9 -0
  36. data/test/app/app/css/sqwishable.css +7 -0
  37. data/test/app/app/css/style.css +2 -0
  38. data/test/app/app/images/background.jpg +1 -0
  39. data/test/app/app/images/email.png +0 -0
  40. data/test/app/app/js/hello.js +1 -0
  41. data/test/app/app/js/hi.coffee +2 -0
  42. data/test/app/app/views/index.haml +1 -0
  43. data/test/build_test.rb +20 -0
  44. data/test/cache_test.rb +10 -0
  45. data/test/helpers_test.rb +23 -0
  46. data/test/img_test.rb +13 -0
  47. data/test/options_test.rb +17 -0
  48. data/test/order_test.rb +21 -0
  49. data/test/preproc_test.rb +23 -0
  50. data/test/simplecss_test.rb +16 -0
  51. data/test/sqwish_test.rb +29 -0
  52. data/test/test_helper.rb +38 -0
  53. data/test/unit_test.rb +96 -0
  54. data/test/yui_test.rb +22 -0
  55. metadata +200 -0
@@ -0,0 +1 @@
1
+ /Gemfile.lock
data/Gemfile ADDED
@@ -0,0 +1,2 @@
1
+ source :rubygems
2
+ gemspec
@@ -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.
@@ -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
@@ -0,0 +1,3 @@
1
+ task :test do
2
+ Dir['test/*_test.rb'].each { |f| load f }
3
+ end
@@ -0,0 +1 @@
1
+ public
@@ -0,0 +1,7 @@
1
+ $:.unshift File.expand_path('../../lib', __FILE__)
2
+
3
+ APP_FILE = 'app.rb'
4
+ APP_CLASS = 'App'
5
+
6
+ require 'sinatra/assetpack/rake'
7
+
@@ -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
@@ -0,0 +1,11 @@
1
+ // This is SASS!
2
+
3
+ #image_embedding_test
4
+ background: url(/images/icon.png?embed)
5
+ width: 16px
6
+ height: 16px
7
+
8
+ /* This should have a cache-buster number.
9
+ */
10
+ #cache_bust_test
11
+ background: url(/images/icon.png)
@@ -0,0 +1,3 @@
1
+ ("App.js goes here.");
2
+
3
+
@@ -0,0 +1,2 @@
1
+ ("jQuery goes here.");
2
+
@@ -0,0 +1,2 @@
1
+ ("A jQuery plugin goes here.");
2
+
@@ -0,0 +1,2 @@
1
+ ("Underscore.js goes here.");
2
+
@@ -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