asset_hat 0.4.1 → 0.4.2
Sign up to get free protection for your applications and to get access to all the features.
- data/.gemtest +0 -0
- data/HISTORY +6 -0
- data/LICENSE +1 -1
- data/README.rdoc +120 -23
- data/Rakefile +7 -6
- data/VERSION.yml +1 -1
- data/asset_hat.gemspec +4 -4
- data/config/assets.yml +3 -3
- data/doc/classes/AssetHat/JS/Vendors.html +1 -1
- data/doc/classes/AssetHatHelper.html +4 -4
- data/doc/created.rid +1 -1
- data/doc/files/HISTORY.html +13 -1
- data/doc/files/LICENSE.html +2 -2
- data/doc/files/README_rdoc.html +154 -54
- data/lib/asset_hat/capistrano.rb +2 -1
- data/lib/asset_hat/js/vendors.rb +1 -1
- data/lib/asset_hat/tasks.rb +1 -1
- data/lib/asset_hat/tasks/css.rb +5 -5
- data/lib/asset_hat/tasks/js.rb +3 -3
- data/lib/asset_hat_helper.rb +44 -23
- data/test/asset_hat_helper_test.rb +3 -3
- metadata +6 -6
- data/Gemfile.lock +0 -36
data/.gemtest
ADDED
File without changes
|
data/HISTORY
CHANGED
@@ -1,5 +1,11 @@
|
|
1
1
|
= HISTORY
|
2
2
|
|
3
|
+
== Version 0.4.2 (2011-08-08)
|
4
|
+
* FIX: Changed Capistrano task to minify assets inside latest release path,
|
5
|
+
not previous release path. (Thanks, sauliusg[https://github.com/sauliusg]!)
|
6
|
+
* FIX: Fixed deprecation warnings when running Rake tasks. (Thanks,
|
7
|
+
jsonperl[https://github.com/jsonperl]!)
|
8
|
+
|
3
9
|
== Version 0.4.1 (2011-05-06)
|
4
10
|
* FIX: Stopped `gem install asset_hat` from foolishly requiring itself.
|
5
11
|
|
data/LICENSE
CHANGED
data/README.rdoc
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
= AssetHat
|
2
2
|
|
3
|
-
Your assets are covered.
|
3
|
+
Load CSS and JS faster. Your assets are covered.
|
4
4
|
|
5
5
|
With Rails' default asset caching, CSS and JS are concatenated (not even
|
6
6
|
minified) at runtime when that bundle is first requested. Not good enough.
|
@@ -8,10 +8,13 @@ To make your pages load faster, AssetHat can automatically:
|
|
8
8
|
|
9
9
|
* Easily *minify* and *bundle* CSS and JS to reduce file sizes and
|
10
10
|
HTTP requests. Do this on deploy, and avoid any performance hit at runtime.
|
11
|
-
* Load
|
12
|
-
from {<b>Google's CDN</b>}[http://code.google.com/apis/ajaxlibs/]
|
11
|
+
* Load <b>popular libraries from the JS community</b> -- like jQuery, YUI, and
|
12
|
+
Dojo -- from {<b>Google's CDN</b>}[http://code.google.com/apis/ajaxlibs/]
|
13
13
|
when in production, or from localhost in development. It's as simple as
|
14
14
|
<code><%= include_js :jquery %></code> to load straight from Google.
|
15
|
+
* Load plenty of JS files in parallel in <b>{LABjs}[http://labjs.com/]
|
16
|
+
mode</b>. When calling <code>include_js</code>, just add <code>:loader =>
|
17
|
+
:lab_js</code>.
|
15
18
|
* Force image URLs in your CSS to use <b>CDN subdomains</b>
|
16
19
|
(including SSL support), not just the current host.
|
17
20
|
* Add an image's last Git[http://git-scm.com/] commit ID to its CSS URLs to
|
@@ -35,16 +38,19 @@ Which expands into:
|
|
35
38
|
<script src="/javascripts/bundles/common.min.js"
|
36
39
|
type="text/javascript"></script>
|
37
40
|
|
38
|
-
Don't have your own copy of jQuery? AssetHat detects this and
|
39
|
-
from Google's CDN instead, whether you're in development or
|
41
|
+
Don't have your own copy of jQuery? AssetHat detects this and knows how to
|
42
|
+
load jQuery from Google's CDN instead, whether you're in development or
|
43
|
+
production.
|
40
44
|
|
41
45
|
Add this to your deploy script, and your CSS/JS will be optimized
|
42
46
|
automatically:
|
43
47
|
|
44
48
|
rake asset_hat:minify
|
45
49
|
|
46
|
-
Tested with Rails 2.3.x. For a quick overview, see
|
47
|
-
{the AssetHat website}[http://mintdigital.github.com/asset_hat/].
|
50
|
+
Tested with Rails 3 and Rails 2.3.x (with Bundler). For a quick overview, see
|
51
|
+
{the AssetHat website}[http://mintdigital.github.com/asset_hat/]. To see how
|
52
|
+
AssetHat performs in production,
|
53
|
+
{check some stats}[http://logicalfriday.com/2011/05/06/assethat-0-4-load-css-and-js-faster-your-assets-are-covered/].
|
48
54
|
For the gritty details, check the
|
49
55
|
{complete docs}[http://mintdigital.github.com/asset_hat/doc/] and
|
50
56
|
{change history}[http://mintdigital.github.com/asset_hat/doc/files/HISTORY.html].
|
@@ -53,27 +59,27 @@ For the gritty details, check the
|
|
53
59
|
|
54
60
|
== Installation
|
55
61
|
|
56
|
-
|
62
|
+
=== Rails 3.x
|
57
63
|
|
58
|
-
|
59
|
-
|
64
|
+
1. Add to your app's Gemfile: <code>gem 'asset_hat', '0.x.x'</code>
|
65
|
+
2. Command-line: <code>bundle install</code>
|
60
66
|
|
61
|
-
|
67
|
+
=== Rails 2.3.x
|
62
68
|
|
63
|
-
|
69
|
+
1. Add the gem:
|
64
70
|
|
65
|
-
|
71
|
+
* If you're using {Bundler 0.9+}[http://github.com/carlhuda/bundler]:
|
66
72
|
|
67
|
-
|
68
|
-
|
73
|
+
1. Add to your app's Gemfile: <code>gem 'asset_hat', '0.x.x'</code>
|
74
|
+
2. Command-line: <code>bundle install</code>
|
69
75
|
|
70
|
-
|
76
|
+
* If you're using Rails 2.3.x's <code>config.gem</code>:
|
71
77
|
|
72
|
-
|
73
|
-
|
74
|
-
|
78
|
+
1. Add to your app's <code>config/environment.rb</code>:
|
79
|
+
<code>config.gem 'asset_hat', :version => '0.x.x'</code>
|
80
|
+
2. Command-line: <code>gem install asset_hat</code>
|
75
81
|
|
76
|
-
|
82
|
+
2. Add to your app's Rakefile: <code>require 'asset_hat/tasks'</code>
|
77
83
|
|
78
84
|
|
79
85
|
|
@@ -122,6 +128,12 @@ For the gritty details, check the
|
|
122
128
|
<code>public/stylesheets/bundles/</code> and
|
123
129
|
<code>public/javascripts/bundles/</code>.
|
124
130
|
|
131
|
+
If you're using a CSS/JS layer like SASS or CoffeeScript, be sure to
|
132
|
+
compile/transpile to regular CSS/JS before running
|
133
|
+
<code>rake asset_hat:minify</code>. (When AssetHat is ready for Rails 3.1,
|
134
|
+
<code>rake asset_hat:minify</code> will automatically start with
|
135
|
+
<code>rake assets:precompile</code>.)
|
136
|
+
|
125
137
|
=== Advanced configuration
|
126
138
|
|
127
139
|
If you manage deployments with Capistrano[http://www.capify.org/], see the
|
@@ -173,12 +185,13 @@ Additional settings are supported in <code>config/assets.yml</code>:
|
|
173
185
|
JS will load from {Google's CDN}[http://code.google.com/apis/ajaxlibs/]
|
174
186
|
in production (or any environment where
|
175
187
|
<code>config.action_controller.consider_all_requests_local</code> is set
|
176
|
-
to <code>
|
188
|
+
to <code>false</code>). If the original request to your app used SSL, the
|
177
189
|
vendor JS will also load from Google's CDN via SSL. If you prefer to use a
|
178
190
|
different CDN, specify its SSL/non-SSL URLs, and the appropriate URL will
|
179
191
|
be used per request.
|
180
192
|
|
181
|
-
A full list of supported vendors is in the
|
193
|
+
A full list of supported vendors is in the
|
194
|
+
<code>AssetHat::JS::Vendors</code> module.
|
182
195
|
|
183
196
|
=== SSL configuration
|
184
197
|
|
@@ -251,6 +264,62 @@ Or include multiple bundles at once:
|
|
251
264
|
When including multiple bundles at once, this yields one
|
252
265
|
<code><link></code> or <code><script></code> element per bundle.
|
253
266
|
|
267
|
+
=== LABjs mode
|
268
|
+
|
269
|
+
Say you're loading several JS bundles. However, because there are so many, you
|
270
|
+
decide to try a popular script loader like {LABjs}[http://labjs.com/] to see
|
271
|
+
how much it improves performance. Here's how it's done the old Rails way:
|
272
|
+
|
273
|
+
<%= javascript_include_tag 'LAB-1.2.0.min.js' %>
|
274
|
+
<script>
|
275
|
+
$LAB.
|
276
|
+
script('/javascripts/jquery-1.6.1.min.js').wait().
|
277
|
+
script('/javascripts/common.js').wait().
|
278
|
+
script('/javascripts/search.js').wait().
|
279
|
+
script('/javascripts/app.js').wait();
|
280
|
+
</script>
|
281
|
+
|
282
|
+
What a hassle. With AssetHat, just set up a bundle in
|
283
|
+
<code>config/assets.yml</code>:
|
284
|
+
|
285
|
+
js:
|
286
|
+
bundles:
|
287
|
+
app:
|
288
|
+
- common
|
289
|
+
- search
|
290
|
+
- app
|
291
|
+
|
292
|
+
Ready to go. Here's how to load jQuery and your bundle normally:
|
293
|
+
|
294
|
+
<%= include_js :jquery, :bundle => 'app' %>
|
295
|
+
|
296
|
+
And here's how to switch on LABjs mode:
|
297
|
+
|
298
|
+
<%= include_js :jquery, :bundle => 'app',
|
299
|
+
:loader => :lab_js %>
|
300
|
+
|
301
|
+
Add your preferred jQuery and LABjs versions to the config file if you haven't
|
302
|
+
already, and that's it. If you don't have a copy of LABjs locally, AssetHat
|
303
|
+
knows how to instead load it from {cdnjs}[http://cdnjs.com/], which uses
|
304
|
+
high-speed Amazon Cloudfront servers.
|
305
|
+
|
306
|
+
This is just the most common LABjs use case. If you want to fine-tune it even
|
307
|
+
further, you can have the best of both worlds:
|
308
|
+
|
309
|
+
<%= include_js :lab_js %>
|
310
|
+
<script>
|
311
|
+
$LAB.
|
312
|
+
script('<%= include_js :jquery, :only_url => true %>').wait().
|
313
|
+
script('<%= include_js "common", :only_url => true %>'). // Non-blocking
|
314
|
+
script('<%= include_js "search", :only_url => true %>').wait().
|
315
|
+
script('<%= include_js "app", :only_url => true %>').wait();
|
316
|
+
</script>
|
317
|
+
|
318
|
+
In this example, <code>common</code> is not a dependency for
|
319
|
+
<code>search</code>, so allow either to execute as soon as possible --
|
320
|
+
whichever happens to load first -- rather than always forcing
|
321
|
+
<code>common</code> to execute first.
|
322
|
+
|
254
323
|
=== Bundle tips
|
255
324
|
|
256
325
|
Don't go overboard with huge bundles:
|
@@ -263,7 +332,35 @@ Don't go overboard with huge bundles:
|
|
263
332
|
the cached plugin code.
|
264
333
|
* Regardless of code-change frequency, it's sometimes faster to split a bundle
|
265
334
|
in half, and load each half in parallel (i.e., two HTTP requests instead of
|
266
|
-
one).
|
335
|
+
one). LABjs mode can help with loading several smaller bundles in parallel.
|
336
|
+
Your own tests will tell what's optimal for your situation.
|
337
|
+
|
338
|
+
|
339
|
+
|
340
|
+
== More info
|
341
|
+
|
342
|
+
* {Official website}[http://mintdigital.github.com/asset_hat/]
|
343
|
+
* {Full documentation}[http://mintdigital.github.com/asset_hat/doc/]
|
344
|
+
* {History/changelog}[http://mintdigital.github.com/asset_hat/doc/files/HISTORY.html]
|
345
|
+
* Released under the
|
346
|
+
{MIT license}[https://github.com/mintdigital/asset_hat/blob/master/LICENSE].
|
347
|
+
|
348
|
+
=== Contributing
|
349
|
+
|
350
|
+
Have an idea, problem, or bug report?
|
351
|
+
{Send a pull request}[http://help.github.com/send-pull-requests/]! Please base
|
352
|
+
pull requests on the `development` branch, not the `master` branch.
|
353
|
+
|
354
|
+
Contributors:
|
355
|
+
|
356
|
+
* {rondevera}[https://github.com/rondevera]
|
357
|
+
(maintainer; Twitter: {@ronalddevera}[https://twitter.com/#!/ronalddevera])
|
358
|
+
* {philnash}[https://github.com/philnash]
|
359
|
+
* {dstrelau}[https://github.com/dstrelau]
|
360
|
+
* {daphonz}[https://github.com/daphonz]
|
361
|
+
* {sauliusg}[https://github.com/sauliusg]
|
362
|
+
* {jsonperl}[https://github.com/jsonperl]
|
363
|
+
|
267
364
|
|
268
365
|
|
269
366
|
== {What is best in AssetHat?}[http://www.youtube.com/watch?v=V30tyaXv6EI]
|
data/Rakefile
CHANGED
@@ -8,12 +8,13 @@ begin
|
|
8
8
|
gemspec.name = 'asset_hat'
|
9
9
|
gemspec.summary = 'Your assets are covered.'
|
10
10
|
gemspec.description = %{
|
11
|
-
Minifies, bundles, and optimizes CSS/JS assets
|
12
|
-
deploy), not at runtime. Loads popular
|
13
|
-
|
14
|
-
CDN in production. Lets you
|
15
|
-
|
16
|
-
|
11
|
+
Load CSS and JS faster. Minifies, bundles, and optimizes CSS/JS assets
|
12
|
+
ahead of time (e.g., on deploy), not at runtime. Loads popular
|
13
|
+
third-party JS (like jQuery, YUI, and Dojo) from localhost in
|
14
|
+
development, and auto-switches to Google's CDN in production. Lets you
|
15
|
+
switch on LABjs mode to load more scripts in parallel. Can rewrite
|
16
|
+
stylesheets to use CDN hosts (not just your web server) and
|
17
|
+
cache-busting hashes for updated images.
|
17
18
|
}.strip.split.join(' ')
|
18
19
|
gemspec.homepage = 'http://mintdigital.github.com/asset_hat'
|
19
20
|
|
data/VERSION.yml
CHANGED
data/asset_hat.gemspec
CHANGED
@@ -5,20 +5,20 @@
|
|
5
5
|
|
6
6
|
Gem::Specification.new do |s|
|
7
7
|
s.name = %q{asset_hat}
|
8
|
-
s.version = "0.4.
|
8
|
+
s.version = "0.4.2"
|
9
9
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
11
11
|
s.authors = ["Ron DeVera", "Mint Digital"]
|
12
|
-
s.date = %q{2011-
|
13
|
-
s.description = %q{Minifies, bundles, and optimizes CSS/JS assets ahead of time (e.g., on deploy), not at runtime. Loads popular third-party JS (like jQuery, YUI, and
|
12
|
+
s.date = %q{2011-08-08}
|
13
|
+
s.description = %q{Load CSS and JS faster. Minifies, bundles, and optimizes CSS/JS assets ahead of time (e.g., on deploy), not at runtime. Loads popular third-party JS (like jQuery, YUI, and Dojo) from localhost in development, and auto-switches to Google's CDN in production. Lets you switch on LABjs mode to load more scripts in parallel. Can rewrite stylesheets to use CDN hosts (not just your web server) and cache-busting hashes for updated images.}
|
14
14
|
s.email = %q{hello@rondevera.com}
|
15
15
|
s.extra_rdoc_files = [
|
16
16
|
"LICENSE",
|
17
17
|
"README.rdoc"
|
18
18
|
]
|
19
19
|
s.files = [
|
20
|
+
".gemtest",
|
20
21
|
"Gemfile",
|
21
|
-
"Gemfile.lock",
|
22
22
|
"HISTORY",
|
23
23
|
"LICENSE",
|
24
24
|
"README.rdoc",
|
data/config/assets.yml
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
#
|
4
4
|
# stylesheet_link_tag 'reset', 'application'
|
5
5
|
# javascript_include_tag(
|
6
|
-
# Rails.env.production? ? '<Google CDN URL>' : 'jquery-1.
|
6
|
+
# Rails.env.production? ? '<Google CDN URL>' : 'jquery-1.6.1')
|
7
7
|
# javascript_include_tag 'utilities', 'application'
|
8
8
|
#
|
9
9
|
# Create matching bundles in this file (no `.css` or `.js` suffixes needed;
|
@@ -17,7 +17,7 @@
|
|
17
17
|
# js:
|
18
18
|
# vendors:
|
19
19
|
# jquery:
|
20
|
-
# version: 1.
|
20
|
+
# version: 1.6.1
|
21
21
|
# bundles:
|
22
22
|
# application:
|
23
23
|
# - utilities
|
@@ -65,7 +65,7 @@ js:
|
|
65
65
|
#
|
66
66
|
# vendors:
|
67
67
|
# jquery:
|
68
|
-
# version: 1.
|
68
|
+
# version: 1.6.1
|
69
69
|
#
|
70
70
|
# Supported vendors:
|
71
71
|
# http://mintdigital.github.com/asset_hat/doc/classes/AssetHat/JS/Vendors.html
|
@@ -186,7 +186,7 @@
|
|
186
186
|
HTTPS. Defaults to false.
|
187
187
|
|
188
188
|
</dd>
|
189
|
-
<dt>version</dt><dd>The vendor version, e.g., ‘1.
|
189
|
+
<dt>version</dt><dd>The vendor version, e.g., ‘1.6.0’ for jQuery 1.6. By default,
|
190
190
|
each vendor version is taken from <tt>config/assets.yml</tt>; use this
|
191
191
|
option to override the configuration.
|
192
192
|
|
@@ -85,7 +85,7 @@
|
|
85
85
|
<a class='source-toggle' href='#' onclick="toggleCode('M000032-source'); return false">
|
86
86
|
[show source]
|
87
87
|
</a>
|
88
|
-
<pre id='M000032-source'> <span class="ruby-comment cmt"># File lib/asset_hat_helper.rb, line
|
88
|
+
<pre id='M000032-source'> <span class="ruby-comment cmt"># File lib/asset_hat_helper.rb, line 363</span>
363: <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">asset_path</span>(<span class="ruby-identifier">type</span>, <span class="ruby-identifier">source</span>)
364: <span class="ruby-keyword kw">case</span> <span class="ruby-identifier">type</span>.<span class="ruby-identifier">to_sym</span>
365: <span class="ruby-keyword kw">when</span> <span class="ruby-identifier">:css</span> ; <span class="ruby-identifier">stylesheet_path</span>(<span class="ruby-identifier">source</span>)
366: <span class="ruby-keyword kw">when</span> <span class="ruby-identifier">:js</span> ; <span class="ruby-identifier">javascript_path</span>(<span class="ruby-identifier">source</span>)
367: <span class="ruby-keyword kw">else</span>
368: <span class="ruby-identifier">raise</span> <span class="ruby-node">%{
369: Unknown type "#{type}"; should be one of:
370: #{AssetHat::TYPES.join(', ')}.
371: }</span>.<span class="ruby-identifier">squish!</span>
372: <span class="ruby-keyword kw">end</span>
373: <span class="ruby-keyword kw">end</span></pre>
|
89
89
|
</div>
|
90
90
|
</div>
|
91
91
|
<div class='method public-instance' id='method-M000030'>
|
@@ -148,7 +148,7 @@
|
|
148
148
|
<a class='source-toggle' href='#' onclick="toggleCode('M000030-source'); return false">
|
149
149
|
[show source]
|
150
150
|
</a>
|
151
|
-
<pre id='M000030-source'> <span class="ruby-comment cmt"># File lib/asset_hat_helper.rb, line 159</span>
159: <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">include_css</span>(<span class="ruby-operator">*</span><span class="ruby-identifier">args</span>)
160: <span class="ruby-keyword kw">return</span> <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">args</span>.<span class="ruby-identifier">blank?</span>
161: 
162: <span class="ruby-
|
151
|
+
<pre id='M000030-source'> <span class="ruby-comment cmt"># File lib/asset_hat_helper.rb, line 159</span>
159: <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">include_css</span>(<span class="ruby-operator">*</span><span class="ruby-identifier">args</span>)
160: <span class="ruby-keyword kw">return</span> <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">args</span>.<span class="ruby-identifier">blank?</span>
161: 
162: <span class="ruby-identifier">initialize_html_cache</span> <span class="ruby-identifier">:css</span>
163: 
164: <span class="ruby-identifier">options</span> = <span class="ruby-identifier">setup_options</span>(<span class="ruby-identifier">args</span>,
165: <span class="ruby-identifier">:media</span> =<span class="ruby-operator">></span> <span class="ruby-value str">'screen,projection'</span>,
166: <span class="ruby-identifier">:ssl</span> =<span class="ruby-operator">></span> <span class="ruby-identifier">controller</span>.<span class="ruby-identifier">request</span>.<span class="ruby-identifier">ssl?</span>
167: )
168: <span class="ruby-identifier">cache_key</span> = <span class="ruby-identifier">setup_cache_key</span>(<span class="ruby-identifier">args</span>, <span class="ruby-identifier">options</span>)
169: 
170: <span class="ruby-keyword kw">if</span> <span class="ruby-operator">!</span><span class="ruby-identifier">asset_cached?</span>(<span class="ruby-identifier">:css</span>, <span class="ruby-identifier">cache_key</span>)
171: <span class="ruby-comment cmt"># Generate HTML and write to cache</span>
172: <span class="ruby-identifier">options</span>[<span class="ruby-identifier">:ssl</span>] <span class="ruby-operator">&&=</span> <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">ssl_asset_host_differs?</span>
173: <span class="ruby-identifier">html</span> = <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">html_cache</span>[<span class="ruby-identifier">:css</span>][<span class="ruby-identifier">cache_key</span>] =
174: <span class="ruby-identifier">include_assets</span>(<span class="ruby-identifier">:css</span>, <span class="ruby-operator">*</span>(<span class="ruby-identifier">args</span> <span class="ruby-operator">+</span> [<span class="ruby-identifier">options</span>]))
175: <span class="ruby-keyword kw">end</span>
176: 
177: <span class="ruby-identifier">html</span> <span class="ruby-operator">||=</span> <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">html_cache</span>[<span class="ruby-identifier">:css</span>][<span class="ruby-identifier">cache_key</span>]
178: <span class="ruby-identifier">make_html_safe</span> <span class="ruby-identifier">html</span>
179: <span class="ruby-keyword kw">end</span></pre>
|
152
152
|
</div>
|
153
153
|
</div>
|
154
154
|
<div class='method public-instance' id='method-M000031'>
|
@@ -174,7 +174,7 @@
|
|
174
174
|
<p>
|
175
175
|
Include jQuery:
|
176
176
|
</p>
|
177
|
-
<pre># Development/test environment:
include_js :jquery
=> <script src="/javascripts/jquery-VERSION.min.js" ...></script>

# Staging/production environment:
include_js :jquery
=> <script src="http://ajax.googleapis.com/.../jquery.min.js" ...></script>
 # Set jQuery versions either in `config/assets.yml`, or by using
 # `include_js :jquery, :version => '1.6.
|
177
|
+
<pre># Development/test environment:
include_js :jquery
=> <script src="/javascripts/jquery-VERSION.min.js" ...></script>

# Staging/production environment:
include_js :jquery
=> <script src="http://ajax.googleapis.com/.../jquery.min.js" ...></script>
 # Set jQuery versions either in `config/assets.yml`, or by using
 # `include_js :jquery, :version => '1.6.1'`.</pre>
|
178
178
|
<p>
|
179
179
|
Include a bundle of JS files (i.e., a concatenated set of files; configure
|
180
180
|
in <tt>config/assets.yml</tt>):
|
@@ -224,7 +224,7 @@
|
|
224
224
|
<a class='source-toggle' href='#' onclick="toggleCode('M000031-source'); return false">
|
225
225
|
[show source]
|
226
226
|
</a>
|
227
|
-
<pre id='M000031-source'> <span class="ruby-comment cmt"># File lib/asset_hat_helper.rb, line 295</span>
295: <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">include_js</span>(<span class="ruby-operator">*</span><span class="ruby-identifier">args</span>)
296: <span class="ruby-keyword kw">return</span> <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">args</span>.<span class="ruby-identifier">blank?</span>
297: 
298: <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">html_cache</span> <span class="ruby-operator">||=</span> {}
299: <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">html_cache</span>[<span class="ruby-identifier">:js</span>] <span class="ruby-operator">||=</span> {}
300: 
301: <span class="ruby-identifier">options</span> = <span class="ruby-identifier">args</span>.<span class="ruby-identifier">extract_options!</span>
302: <span class="ruby-identifier">options</span>.<span class="ruby-identifier">symbolize_keys!</span>.<span class="ruby-identifier">reverse_merge!</span>(<span class="ruby-identifier">:ssl</span> =<span class="ruby-operator">></span> <span class="ruby-identifier">controller</span>.<span class="ruby-identifier">request</span>.<span class="ruby-identifier">ssl?</span>)
303: <span class="ruby-identifier">cache_key</span> = (<span class="ruby-identifier">args</span> <span class="ruby-operator">+</span> [<span class="ruby-identifier">options</span>]).<span class="ruby-identifier">inspect</span>
304: 
305: <span class="ruby-keyword kw">if</span> <span class="ruby-operator">!</span><span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">cache?</span> <span class="ruby-operator">||</span> <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">html_cache</span>[<span class="ruby-identifier">:js</span>][<span class="ruby-identifier">cache_key</span>].<span class="ruby-identifier">blank?</span>
306: <span class="ruby-comment cmt"># Generate HTML and write to cache</span>
307: 
308: <span class="ruby-identifier">htmls</span> = []
309: <span class="ruby-identifier">include_assets_options</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">except</span>(<span class="ruby-identifier">:ssl</span>, <span class="ruby-identifier">:version</span>)
310: <span class="ruby-identifier">loader</span> = <span class="ruby-keyword kw">nil</span>
311: 
312: <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">options</span>[<span class="ruby-identifier">:loader</span>].<span class="ruby-identifier">present?</span>
313: <span class="ruby-identifier">loader</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">delete</span>(<span class="ruby-identifier">:loader</span>)
314: <span class="ruby-identifier">include_assets_options</span>.<span class="ruby-identifier">merge!</span>(<span class="ruby-identifier">:only_url</span> =<span class="ruby-operator">></span> <span class="ruby-keyword kw">true</span>)
315: <span class="ruby-keyword kw">end</span>
316: 
317: <span class="ruby-comment cmt"># Get vendor HTML/URLs</span>
318: <span class="ruby-identifier">included_vendors</span> = (<span class="ruby-identifier">args</span> <span class="ruby-operator">&</span> <span class="ruby-constant">AssetHat</span><span class="ruby-operator">::</span><span class="ruby-constant">JS</span><span class="ruby-operator">::</span><span class="ruby-constant">VENDORS</span>)
319: 
320: <span class="ruby-comment cmt"># Add HTML inclusions for vendors</span>
321: <span class="ruby-identifier">included_vendors</span>.<span class="ruby-identifier">each</span> <span class="ruby-keyword kw">do</span> <span class="ruby-operator">|</span><span class="ruby-identifier">vendor</span><span class="ruby-operator">|</span>
322: <span class="ruby-identifier">args</span>.<span class="ruby-identifier">delete</span> <span class="ruby-identifier">vendor</span>
323: <span class="ruby-identifier">src</span> = <span class="ruby-constant">AssetHat</span><span class="ruby-operator">::</span><span class="ruby-constant">JS</span><span class="ruby-operator">::</span><span class="ruby-constant">Vendors</span>.<span class="ruby-identifier">source_for</span>(
324: <span class="ruby-identifier">vendor</span>, <span class="ruby-identifier">options</span>.<span class="ruby-identifier">slice</span>(<span class="ruby-identifier">:ssl</span>, <span class="ruby-identifier">:version</span>))
325: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-identifier">include_assets</span>(<span class="ruby-identifier">:js</span>, <span class="ruby-identifier">src</span>,
326: <span class="ruby-identifier">include_assets_options</span>.<span class="ruby-identifier">merge</span>(<span class="ruby-identifier">:cache</span> =<span class="ruby-operator">></span> <span class="ruby-keyword kw">true</span>).
327: <span class="ruby-identifier">except</span>(<span class="ruby-identifier">:bundle</span>, <span class="ruby-identifier">:bundles</span>))
328: <span class="ruby-keyword kw">end</span>
329: 
330: <span class="ruby-comment cmt"># Get non-vendor HTML/URLs</span>
331: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-identifier">include_assets</span>(<span class="ruby-identifier">:js</span>, <span class="ruby-operator">*</span>(<span class="ruby-identifier">args</span> <span class="ruby-operator">+</span> [<span class="ruby-identifier">include_assets_options</span>]))
332: <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">reject!</span>(<span class="ruby-operator">&</span><span class="ruby-identifier">:blank?</span>)
333: 
334: <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">loader</span>
335: <span class="ruby-comment cmt"># `htmls` actually contains URLs; convert to an HTML/JS block</span>
336: <span class="ruby-identifier">urls</span> = <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">dup</span>.<span class="ruby-identifier">flatten</span>
337: <span class="ruby-identifier">htmls</span> = []
338: 
339: <span class="ruby-keyword kw">case</span> <span class="ruby-identifier">loader</span>
340: <span class="ruby-keyword kw">when</span> <span class="ruby-identifier">:lab_js</span>
341: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-identifier">include_js</span>(<span class="ruby-identifier">:lab_js</span>)
342: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-value str">'<script type="text/javascript">'</span>
343: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-constant">AssetHat</span><span class="ruby-operator">::</span><span class="ruby-constant">JS</span><span class="ruby-operator">::</span><span class="ruby-constant">Vendors</span>.<span class="ruby-identifier">loader_js</span>(<span class="ruby-identifier">:lab_js</span>, <span class="ruby-identifier">:urls</span> =<span class="ruby-operator">></span> <span class="ruby-identifier">urls</span>)
344: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-value str">'</script>'</span>
345: <span class="ruby-keyword kw">end</span>
346: <span class="ruby-keyword kw">end</span>
347: 
348: <span class="ruby-comment cmt"># Convert to a URL (string), array of URLs, or one long HTML string</span>
349: <span class="ruby-identifier">html</span> = <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">options</span>[<span class="ruby-identifier">:only_url</span>]
350: <span class="ruby-comment cmt"># Return one URL (string) or multiple (array of strings).</span>
351: <span class="ruby-comment cmt"># Not actually HTML.</span>
352: <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">flatten!</span>
353: <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">size</span> <span class="ruby-operator">==</span> <span class="ruby-value">1</span> <span class="ruby-operator">?</span> <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">first</span> <span class="ruby-operator">:</span> <span class="ruby-identifier">htmls</span>
354: <span class="ruby-keyword kw">else</span>
355: <span class="ruby-comment cmt"># Return one long string of HTML</span>
356: <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">join</span>(<span class="ruby-value str">"\n"</span>).<span class="ruby-identifier">strip</span>
357: <span class="ruby-keyword kw">end</span>
358: <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">html_cache</span>[<span class="ruby-identifier">:js</span>][<span class="ruby-identifier">cache_key</span>] = <span class="ruby-identifier">html</span>
359: <span class="ruby-keyword kw">end</span>
360: 
361: <span class="ruby-identifier">html</span> <span class="ruby-operator">||=</span> <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">html_cache</span>[<span class="ruby-identifier">:js</span>][<span class="ruby-identifier">cache_key</span>]
362: <span class="ruby-identifier">html</span>.<span class="ruby-identifier">respond_to?</span>(<span class="ruby-identifier">:html_safe</span>) <span class="ruby-operator">?</span> <span class="ruby-identifier">html</span>.<span class="ruby-identifier">html_safe</span> <span class="ruby-operator">:</span> <span class="ruby-identifier">html</span>
363: <span class="ruby-keyword kw">end</span></pre>
|
227
|
+
<pre id='M000031-source'> <span class="ruby-comment cmt"># File lib/asset_hat_helper.rb, line 295</span>
295: <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">include_js</span>(<span class="ruby-operator">*</span><span class="ruby-identifier">args</span>)
296: <span class="ruby-keyword kw">return</span> <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">args</span>.<span class="ruby-identifier">blank?</span>
297: 
298: <span class="ruby-identifier">initialize_html_cache</span> <span class="ruby-identifier">:js</span>
299: 
300: <span class="ruby-identifier">options</span> = <span class="ruby-identifier">setup_options</span>(<span class="ruby-identifier">args</span>, <span class="ruby-identifier">:ssl</span> =<span class="ruby-operator">></span> <span class="ruby-identifier">controller</span>.<span class="ruby-identifier">request</span>.<span class="ruby-identifier">ssl?</span>)
301: <span class="ruby-identifier">cache_key</span> = <span class="ruby-identifier">setup_cache_key</span>(<span class="ruby-identifier">args</span>, <span class="ruby-identifier">options</span>)
302: 
303: <span class="ruby-keyword kw">if</span> <span class="ruby-operator">!</span><span class="ruby-identifier">asset_cached?</span>(<span class="ruby-identifier">:js</span>, <span class="ruby-identifier">cache_key</span>)
304: <span class="ruby-comment cmt"># Generate HTML and write to cache</span>
305: 
306: <span class="ruby-identifier">htmls</span> = []
307: <span class="ruby-identifier">include_assets_options</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">except</span>(<span class="ruby-identifier">:ssl</span>, <span class="ruby-identifier">:version</span>)
308: 
309: <span class="ruby-identifier">loader</span> = <span class="ruby-identifier">options</span>.<span class="ruby-identifier">delete</span>(<span class="ruby-identifier">:loader</span>)
310: <span class="ruby-identifier">include_assets_options</span>.<span class="ruby-identifier">merge!</span>(<span class="ruby-identifier">:only_url</span> =<span class="ruby-operator">></span> <span class="ruby-keyword kw">true</span>) <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">loader</span>
311: 
312: <span class="ruby-comment cmt"># Get vendor HTML/URLs</span>
313: <span class="ruby-identifier">included_vendors</span> = (<span class="ruby-identifier">args</span> <span class="ruby-operator">&</span> <span class="ruby-constant">AssetHat</span><span class="ruby-operator">::</span><span class="ruby-constant">JS</span><span class="ruby-operator">::</span><span class="ruby-constant">VENDORS</span>)
314: 
315: <span class="ruby-comment cmt"># Add HTML inclusions for vendors</span>
316: <span class="ruby-identifier">included_vendors</span>.<span class="ruby-identifier">each</span> <span class="ruby-keyword kw">do</span> <span class="ruby-operator">|</span><span class="ruby-identifier">vendor</span><span class="ruby-operator">|</span>
317: <span class="ruby-identifier">args</span>.<span class="ruby-identifier">delete</span> <span class="ruby-identifier">vendor</span>
318: <span class="ruby-identifier">src</span> = <span class="ruby-constant">AssetHat</span><span class="ruby-operator">::</span><span class="ruby-constant">JS</span><span class="ruby-operator">::</span><span class="ruby-constant">Vendors</span>.<span class="ruby-identifier">source_for</span>(
319: <span class="ruby-identifier">vendor</span>, <span class="ruby-identifier">options</span>.<span class="ruby-identifier">slice</span>(<span class="ruby-identifier">:ssl</span>, <span class="ruby-identifier">:version</span>))
320: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-identifier">include_assets</span>(<span class="ruby-identifier">:js</span>, <span class="ruby-identifier">src</span>,
321: <span class="ruby-identifier">include_assets_options</span>.<span class="ruby-identifier">merge</span>(<span class="ruby-identifier">:cache</span> =<span class="ruby-operator">></span> <span class="ruby-keyword kw">true</span>).
322: <span class="ruby-identifier">except</span>(<span class="ruby-identifier">:bundle</span>, <span class="ruby-identifier">:bundles</span>))
323: <span class="ruby-keyword kw">end</span>
324: 
325: <span class="ruby-comment cmt"># Get non-vendor HTML/URLs</span>
326: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-identifier">include_assets</span>(<span class="ruby-identifier">:js</span>, <span class="ruby-operator">*</span>(<span class="ruby-identifier">args</span> <span class="ruby-operator">+</span> [<span class="ruby-identifier">include_assets_options</span>]))
327: <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">reject!</span>(<span class="ruby-operator">&</span><span class="ruby-identifier">:blank?</span>)
328: 
329: <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">loader</span>
330: <span class="ruby-comment cmt"># `htmls` actually contains URLs; convert to an HTML/JS block</span>
331: <span class="ruby-identifier">urls</span> = <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">dup</span>.<span class="ruby-identifier">flatten</span>
332: <span class="ruby-identifier">htmls</span> = []
333: 
334: <span class="ruby-keyword kw">case</span> <span class="ruby-identifier">loader</span>
335: <span class="ruby-keyword kw">when</span> <span class="ruby-identifier">:lab_js</span>
336: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-identifier">include_js</span>(<span class="ruby-identifier">:lab_js</span>)
337: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-value str">'<script type="text/javascript">'</span>
338: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-constant">AssetHat</span><span class="ruby-operator">::</span><span class="ruby-constant">JS</span><span class="ruby-operator">::</span><span class="ruby-constant">Vendors</span>.<span class="ruby-identifier">loader_js</span>(<span class="ruby-identifier">:lab_js</span>, <span class="ruby-identifier">:urls</span> =<span class="ruby-operator">></span> <span class="ruby-identifier">urls</span>)
339: <span class="ruby-identifier">htmls</span> <span class="ruby-operator"><<</span> <span class="ruby-value str">'</script>'</span>
340: <span class="ruby-keyword kw">end</span>
341: <span class="ruby-keyword kw">end</span>
342: 
343: <span class="ruby-comment cmt"># Convert to a URL (string), array of URLs, or one long HTML string</span>
344: <span class="ruby-identifier">html</span> = <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">options</span>[<span class="ruby-identifier">:only_url</span>]
345: <span class="ruby-comment cmt"># Return one URL (string) or multiple (array of strings).</span>
346: <span class="ruby-comment cmt"># Not actually HTML.</span>
347: <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">flatten!</span>
348: <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">size</span> <span class="ruby-operator">==</span> <span class="ruby-value">1</span> <span class="ruby-operator">?</span> <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">first</span> <span class="ruby-operator">:</span> <span class="ruby-identifier">htmls</span>
349: <span class="ruby-keyword kw">else</span>
350: <span class="ruby-comment cmt"># Return one long string of HTML</span>
351: <span class="ruby-identifier">htmls</span>.<span class="ruby-identifier">join</span>(<span class="ruby-value str">"\n"</span>).<span class="ruby-identifier">strip</span>
352: <span class="ruby-keyword kw">end</span>
353: <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">html_cache</span>[<span class="ruby-identifier">:js</span>][<span class="ruby-identifier">cache_key</span>] = <span class="ruby-identifier">html</span>
354: <span class="ruby-keyword kw">end</span>
355: 
356: <span class="ruby-identifier">html</span> <span class="ruby-operator">||=</span> <span class="ruby-constant">AssetHat</span>.<span class="ruby-identifier">html_cache</span>[<span class="ruby-identifier">:js</span>][<span class="ruby-identifier">cache_key</span>]
357: <span class="ruby-identifier">make_html_safe</span> <span class="ruby-identifier">html</span>
358: <span class="ruby-keyword kw">end</span></pre>
|
228
228
|
</div>
|
229
229
|
</div>
|
230
230
|
</div>
|
data/doc/created.rid
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
Mon, 08 Aug 2011 14:30:15 -0400
|
data/doc/files/HISTORY.html
CHANGED
@@ -31,13 +31,25 @@
|
|
31
31
|
</div>
|
32
32
|
<div class='last-update'>
|
33
33
|
Last Update:
|
34
|
-
<span class='datetime'>
|
34
|
+
<span class='datetime'>Mon Aug 08 13:47:59 -0400 2011</span>
|
35
35
|
</div>
|
36
36
|
</div>
|
37
37
|
<div id='content'>
|
38
38
|
<div id='text'>
|
39
39
|
<div id='description'>
|
40
40
|
<h1><a href="HISTORY.html">HISTORY</a></h1>
|
41
|
+
<h2>Version 0.4.2 (2011-08-08)</h2>
|
42
|
+
<ul>
|
43
|
+
<li>FIX: Changed Capistrano task to minify assets inside latest release path,
|
44
|
+
not previous release path. (Thanks, <a
|
45
|
+
href="https://github.com/sauliusg">sauliusg</a>!)
|
46
|
+
|
47
|
+
</li>
|
48
|
+
<li>FIX: Fixed deprecation warnings when running Rake tasks. (Thanks, <a
|
49
|
+
href="https://github.com/jsonperl">jsonperl</a>!)
|
50
|
+
|
51
|
+
</li>
|
52
|
+
</ul>
|
41
53
|
<h2>Version 0.4.1 (2011-05-06)</h2>
|
42
54
|
<ul>
|
43
55
|
<li>FIX: Stopped `gem install asset_hat` from foolishly requiring itself.
|
data/doc/files/LICENSE.html
CHANGED
@@ -31,14 +31,14 @@
|
|
31
31
|
</div>
|
32
32
|
<div class='last-update'>
|
33
33
|
Last Update:
|
34
|
-
<span class='datetime'>
|
34
|
+
<span class='datetime'>Mon Aug 08 12:28:21 -0400 2011</span>
|
35
35
|
</div>
|
36
36
|
</div>
|
37
37
|
<div id='content'>
|
38
38
|
<div id='text'>
|
39
39
|
<div id='description'>
|
40
40
|
<p>
|
41
|
-
Copyright ©
|
41
|
+
Copyright © 2011 Ron DeVera, Mint Digital
|
42
42
|
</p>
|
43
43
|
<p>
|
44
44
|
Permission is hereby granted, free of charge, to any person obtaining a
|
data/doc/files/README_rdoc.html
CHANGED
@@ -9,14 +9,14 @@
|
|
9
9
|
function popupCode(url) {
|
10
10
|
window.open(url, "Code", "resizable=yes,scrollbars=yes,toolbar=no,status=no,height=150,width=400")
|
11
11
|
}
|
12
|
-
|
12
|
+
|
13
13
|
function toggleCode(id) {
|
14
14
|
var code = document.getElementById(id)
|
15
|
-
|
15
|
+
|
16
16
|
code.style.display = code.style.display != 'block' ? 'block' : 'none'
|
17
17
|
return true
|
18
18
|
}
|
19
|
-
|
19
|
+
|
20
20
|
// Make codeblocks hidden by default
|
21
21
|
document.writeln('<' + 'style type="text/css">.method .source pre { display: none }<\/style>')
|
22
22
|
//]]>
|
@@ -31,7 +31,7 @@
|
|
31
31
|
</div>
|
32
32
|
<div class='last-update'>
|
33
33
|
Last Update:
|
34
|
-
<span class='datetime'>
|
34
|
+
<span class='datetime'>Mon Aug 08 12:28:21 -0400 2011</span>
|
35
35
|
</div>
|
36
36
|
</div>
|
37
37
|
<div id='content'>
|
@@ -39,7 +39,7 @@
|
|
39
39
|
<div id='description'>
|
40
40
|
<h1><a href="../classes/AssetHat.html">AssetHat</a></h1>
|
41
41
|
<p>
|
42
|
-
Your assets are covered.
|
42
|
+
Load CSS and JS faster. Your assets are covered.
|
43
43
|
</p>
|
44
44
|
<p>
|
45
45
|
With Rails’ default asset caching, CSS and JS are concatenated (not
|
@@ -50,22 +50,28 @@
|
|
50
50
|
<ul>
|
51
51
|
<li>Easily <b>minify</b> and <b>bundle</b> CSS and JS to reduce file sizes and
|
52
52
|
HTTP requests. Do this on deploy, and avoid any performance hit at runtime.
|
53
|
-
|
53
|
+
|
54
54
|
</li>
|
55
|
-
<li>Load
|
55
|
+
<li>Load <b>popular libraries from the JS community</b> — like jQuery,
|
56
|
+
YUI, and Dojo — from <a
|
56
57
|
href="http://code.google.com/apis/ajaxlibs/">Google's CDN</a> when in
|
57
58
|
production, or from localhost in development. It’s as simple as
|
58
59
|
<tt><%= include_js :jquery %></tt> to load straight from Google.
|
59
|
-
|
60
|
+
|
61
|
+
</li>
|
62
|
+
<li>Load plenty of JS files in parallel in <b><a
|
63
|
+
href="http://labjs.com/">LABjs</a> mode</b>. When calling
|
64
|
+
<tt>include_js</tt>, just add <tt>:loader => :lab_js</tt>.
|
65
|
+
|
60
66
|
</li>
|
61
67
|
<li>Force image URLs in your CSS to use <b>CDN subdomains</b> (including SSL
|
62
68
|
support), not just the current host.
|
63
|
-
|
69
|
+
|
64
70
|
</li>
|
65
71
|
<li>Add an image’s last <a href="http://git-scm.com/">Git</a> commit ID
|
66
72
|
to its CSS URLs to <b>bust browser caches</b> (e.g.,
|
67
73
|
<tt>/images/foo.png?ab12cd3</tt>).
|
68
|
-
|
74
|
+
|
69
75
|
</li>
|
70
76
|
</ul>
|
71
77
|
<p>
|
@@ -78,9 +84,9 @@
|
|
78
84
|
<pre><link href="/stylesheets/bundles/application.min.css"
 media="screen,projection" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery-1.x.x.min.js"
 type="text/javascript"></script>
 <!-- In production, jQuery loads from Google's CDN instead. -->
<script src="/javascripts/bundles/plugins.min.js"
 type="text/javascript"></script>
<script src="/javascripts/bundles/common.min.js"
 type="text/javascript"></script></pre>
|
79
85
|
<p>
|
80
86
|
Don’t have your own copy of jQuery? <a
|
81
|
-
href="../classes/AssetHat.html">AssetHat</a> detects this and
|
82
|
-
from Google’s CDN instead, whether you’re in
|
83
|
-
production.
|
87
|
+
href="../classes/AssetHat.html">AssetHat</a> detects this and knows how to
|
88
|
+
load jQuery from Google’s CDN instead, whether you’re in
|
89
|
+
development or production.
|
84
90
|
</p>
|
85
91
|
<p>
|
86
92
|
Add this to your deploy script, and your CSS/JS will be optimized
|
@@ -88,84 +94,81 @@
|
|
88
94
|
</p>
|
89
95
|
<pre>rake asset_hat:minify</pre>
|
90
96
|
<p>
|
91
|
-
Tested with Rails 2.3.x. For a quick overview,
|
92
|
-
href="http://mintdigital.github.com/asset_hat/">the AssetHat
|
93
|
-
|
97
|
+
Tested with Rails 3 and Rails 2.3.x (with Bundler). For a quick overview,
|
98
|
+
see <a href="http://mintdigital.github.com/asset_hat/">the AssetHat
|
99
|
+
website</a>. To see how <a href="../classes/AssetHat.html">AssetHat</a>
|
100
|
+
performs in production, <a
|
101
|
+
href="http://logicalfriday.com/2011/05/06/assethat-0-4-load-css-and-js-faster-your-assets-are-covered/">check
|
102
|
+
some stats</a>. For the gritty details, check the <a
|
94
103
|
href="http://mintdigital.github.com/asset_hat/doc/">complete docs</a> and
|
95
104
|
<a
|
96
105
|
href="http://mintdigital.github.com/asset_hat/doc/files/HISTORY.html">change
|
97
106
|
history</a>.
|
98
107
|
</p>
|
99
108
|
<h2>Installation</h2>
|
100
|
-
<
|
101
|
-
<li>Rails 3.x:
|
102
|
-
|
109
|
+
<h3>Rails 3.x</h3>
|
103
110
|
<ol>
|
104
111
|
<li>Add to your app’s Gemfile: <tt>gem 'asset_hat', '0.x.x'</tt>
|
105
|
-
|
112
|
+
|
106
113
|
</li>
|
107
114
|
<li>Command-line: <tt>bundle install</tt>
|
108
|
-
|
115
|
+
|
109
116
|
</li>
|
110
117
|
</ol>
|
111
|
-
</
|
112
|
-
<li>Rails 2.3.x:
|
113
|
-
|
118
|
+
<h3>Rails 2.3.x</h3>
|
114
119
|
<ol>
|
115
120
|
<li>Add the gem:
|
116
|
-
|
121
|
+
|
117
122
|
<ul>
|
118
123
|
<li>If you’re using <a href="http://github.com/carlhuda/bundler">Bundler
|
119
124
|
0.9+</a>:
|
120
|
-
|
125
|
+
|
121
126
|
<ol>
|
122
127
|
<li>Add to your app’s Gemfile: <tt>gem 'asset_hat', '0.x.x'</tt>
|
123
|
-
|
128
|
+
|
124
129
|
</li>
|
125
130
|
<li>Command-line: <tt>bundle install</tt>
|
126
|
-
|
131
|
+
|
127
132
|
</li>
|
128
133
|
</ol>
|
129
134
|
</li>
|
130
135
|
<li>If you’re using Rails 2.3.x’s <tt>config.gem</tt>:
|
131
|
-
|
136
|
+
|
132
137
|
<ol>
|
133
138
|
<li>Add to your app’s <tt>config/environment.rb</tt>: <tt>config.gem
|
134
139
|
'asset_hat', :version => '0.x.x'</tt>
|
135
|
-
|
140
|
+
|
136
141
|
</li>
|
137
142
|
<li>Command-line: <tt>gem install asset_hat</tt>
|
138
|
-
|
143
|
+
|
139
144
|
</li>
|
140
145
|
</ol>
|
141
146
|
</li>
|
142
147
|
</ul>
|
143
148
|
</li>
|
144
149
|
<li>Add to your app’s Rakefile: <tt>require 'asset_hat/tasks'</tt>
|
145
|
-
|
150
|
+
|
146
151
|
</li>
|
147
152
|
</ol>
|
148
|
-
</li>
|
149
|
-
</ul>
|
150
153
|
<h2>Quick start & configuration</h2>
|
151
154
|
<ol>
|
152
155
|
<li>In all of your layouts and views, change <tt>stylesheet_link_tag</tt> to
|
153
156
|
<tt>include_css</tt>, and change <tt>javascript_include_tag</tt> to
|
154
157
|
<tt>include_js</tt>. (Don’t worry, these helpers use the same
|
155
158
|
arguments as Rails’ helpers. Nothing will break.)
|
156
|
-
|
159
|
+
|
157
160
|
</li>
|
158
161
|
<li>Create the default config file:
|
159
|
-
|
162
|
+
|
160
163
|
<pre>rake asset_hat:config</pre>
|
161
164
|
</li>
|
162
165
|
<li>In your app, open the new file at <tt>config/assets.yml</tt>, and set up
|
163
166
|
your CSS/JS bundles according to that file’s example.
|
164
|
-
|
167
|
+
|
165
168
|
</li>
|
166
169
|
<li>In your layouts and views, switch to the new bundles. For example, if you
|
167
170
|
originally had this:
|
168
|
-
|
171
|
+
|
169
172
|
<pre><%# app/views/layouts/application.html.erb: %>
<%= stylesheet_include_tag 'reset', 'application' %></pre>
|
170
173
|
<p>
|
171
174
|
Then you’ll now have:
|
@@ -173,7 +176,7 @@
|
|
173
176
|
<pre># config/assets.yml:
css:
 bundles:
 application: ['reset', 'application']

<%# app/views/layouts/application.html.erb: %>
<%= include_css :bundle => 'application' %></pre>
|
174
177
|
</li>
|
175
178
|
<li>Add this to your deployment script:
|
176
|
-
|
179
|
+
|
177
180
|
<pre>rake asset_hat:minify</pre>
|
178
181
|
<p>
|
179
182
|
This minifies all of the CSS/JS files listed in <tt>config/assets.yml</tt>,
|
@@ -186,6 +189,14 @@
|
|
186
189
|
<tt>public/stylesheets/bundles/</tt> and
|
187
190
|
<tt>public/javascripts/bundles/</tt>.
|
188
191
|
</p>
|
192
|
+
<p>
|
193
|
+
If you’re using a CSS/JS layer like SASS or CoffeeScript, be sure to
|
194
|
+
compile/transpile to regular CSS/JS before running <tt>rake
|
195
|
+
asset_hat:minify</tt>. (When <a
|
196
|
+
href="../classes/AssetHat.html">AssetHat</a> is ready for Rails 3.1,
|
197
|
+
<tt>rake asset_hat:minify</tt> will automatically start with <tt>rake
|
198
|
+
assets:precompile</tt>.)
|
199
|
+
</p>
|
189
200
|
</li>
|
190
201
|
</ol>
|
191
202
|
<h3>Advanced configuration</h3>
|
@@ -216,7 +227,7 @@
|
|
216
227
|
Lecomte’s YUI Compressor and Schlueter’s PHP cssmin), and JS is
|
217
228
|
minified with <a href="http://github.com/rgrove/jsmin">rgrove/jsmin</a> (a
|
218
229
|
Ruby port of Crockford’s JSMin).
|
219
|
-
|
230
|
+
|
220
231
|
<p>
|
221
232
|
If you’d prefer to have slightly more readable code for debugging
|
222
233
|
purposes, you can switch both the CSS and JS engines to <tt>weak</tt>.
|
@@ -226,7 +237,7 @@
|
|
226
237
|
<li><tt>vendors</tt>: Configures third-party JS that’s loaded from a CDN
|
227
238
|
or other external source. The following example configures jQuery and
|
228
239
|
jQuery UI for use throughout the app:
|
229
|
-
|
240
|
+
|
230
241
|
<pre>js:
 vendors:
 jquery:
 version: 1.5.2
 jquery_ui:
 version: 1.8.12
 remote_url: http://cdn.example.com/js/jquery-ui-1.8.12.min.js
 remote_ssl_url: https://cdn-ssl.example.com/js/jquery-ui-1.8.12.min.js</pre>
|
231
242
|
<p>
|
232
243
|
Configuration keys per vendor:
|
@@ -236,22 +247,21 @@
|
|
236
247
|
above, <tt><%= include_js :jquery %></tt> uses version 1.5.2 by
|
237
248
|
default. You can override this for special layouts/views with <tt><%=
|
238
249
|
include_js :jquery, :version => '1.3.2' %></tt>.
|
239
|
-
|
250
|
+
|
240
251
|
</li>
|
241
252
|
<li><tt>remote_url</tt>, <tt>remote_ssl_url</tt>: By default, vendor JS will
|
242
253
|
load from <a href="http://code.google.com/apis/ajaxlibs/">Google's CDN</a>
|
243
254
|
in production (or any environment where
|
244
255
|
<tt>config.action_controller.consider_all_requests_local</tt> is set to
|
245
|
-
<tt>
|
246
|
-
will also load from Google’s CDN via SSL. If you prefer to use a
|
256
|
+
<tt>false</tt>). If the original request to your app used SSL, the vendor
|
257
|
+
JS will also load from Google’s CDN via SSL. If you prefer to use a
|
247
258
|
different CDN, specify its SSL/non-SSL URLs, and the appropriate URL will
|
248
259
|
be used per request.
|
249
|
-
|
260
|
+
|
250
261
|
</li>
|
251
262
|
</ul>
|
252
263
|
<p>
|
253
|
-
A full list of supported vendors is in the <
|
254
|
-
href="../classes/AssetHat/JS/Vendors.html">AssetHat::JS::Vendors</a>
|
264
|
+
A full list of supported vendors is in the <tt>AssetHat::JS::Vendors</tt>
|
255
265
|
module.
|
256
266
|
</p>
|
257
267
|
</li>
|
@@ -319,6 +329,45 @@
|
|
319
329
|
When including multiple bundles at once, this yields one
|
320
330
|
<tt><link></tt> or <tt><script></tt> element per bundle.
|
321
331
|
</p>
|
332
|
+
<h3>LABjs mode</h3>
|
333
|
+
<p>
|
334
|
+
Say you’re loading several JS bundles. However, because there are so
|
335
|
+
many, you decide to try a popular script loader like <a
|
336
|
+
href="http://labjs.com/">LABjs</a> to see how much it improves performance.
|
337
|
+
Here’s how it’s done the old Rails way:
|
338
|
+
</p>
|
339
|
+
<pre><%= javascript_include_tag 'LAB-1.2.0.min.js' %>
<script>
 $LAB.
 script('/javascripts/jquery-1.6.1.min.js').wait().
 script('/javascripts/common.js').wait().
 script('/javascripts/search.js').wait().
 script('/javascripts/app.js').wait();
</script></pre>
|
340
|
+
<p>
|
341
|
+
What a hassle. With <a href="../classes/AssetHat.html">AssetHat</a>, just
|
342
|
+
set up a bundle in <tt>config/assets.yml</tt>:
|
343
|
+
</p>
|
344
|
+
<pre>js:
 bundles:
 app:
 - common
 - search
 - app</pre>
|
345
|
+
<p>
|
346
|
+
Ready to go. Here’s how to load jQuery and your bundle normally:
|
347
|
+
</p>
|
348
|
+
<pre><%= include_js :jquery, :bundle => 'app' %></pre>
|
349
|
+
<p>
|
350
|
+
And here’s how to switch on LABjs mode:
|
351
|
+
</p>
|
352
|
+
<pre><%= include_js :jquery, :bundle => 'app',
 :loader => :lab_js %></pre>
|
353
|
+
<p>
|
354
|
+
Add your preferred jQuery and LABjs versions to the config file if you
|
355
|
+
haven’t already, and that’s it. If you don’t have a copy
|
356
|
+
of LABjs locally, <a href="../classes/AssetHat.html">AssetHat</a> knows how
|
357
|
+
to instead load it from <a href="http://cdnjs.com/">cdnjs</a>, which uses
|
358
|
+
high-speed Amazon Cloudfront servers.
|
359
|
+
</p>
|
360
|
+
<p>
|
361
|
+
This is just the most common LABjs use case. If you want to fine-tune it
|
362
|
+
even further, you can have the best of both worlds:
|
363
|
+
</p>
|
364
|
+
<pre><%= include_js :lab_js %>
<script>
 $LAB.
 script('<%= include_js :jquery, :only_url => true %>').wait().
 script('<%= include_js "common", :only_url => true %>'). // Non-blocking
 script('<%= include_js "search", :only_url => true %>').wait().
 script('<%= include_js "app", :only_url => true %>').wait();
</script></pre>
|
365
|
+
<p>
|
366
|
+
In this example, <tt>common</tt> is not a dependency for <tt>search</tt>,
|
367
|
+
so allow either to execute as soon as possible — whichever happens to
|
368
|
+
load first — rather than always forcing <tt>common</tt> to execute
|
369
|
+
first.
|
370
|
+
</p>
|
322
371
|
<h3>Bundle tips</h3>
|
323
372
|
<p>
|
324
373
|
Don’t go overboard with huge bundles:
|
@@ -326,31 +375,82 @@
|
|
326
375
|
<ul>
|
327
376
|
<li>Mobile browsers may not cache CSS/JS files that are too large, regardless
|
328
377
|
of gzipping. Check the latest specs for each mobile browser you support.
|
329
|
-
|
378
|
+
|
330
379
|
</li>
|
331
380
|
<li>You might want to put plugins (rarely changed) in one bundle, and
|
332
381
|
application code (frequently changed) in another bundle. This way, when the
|
333
382
|
app code changes, the browser re-downloads only the new app code, and uses
|
334
383
|
the cached plugin code.
|
335
|
-
|
384
|
+
|
336
385
|
</li>
|
337
386
|
<li>Regardless of code-change frequency, it’s sometimes faster to split a
|
338
387
|
bundle in half, and load each half in parallel (i.e., two HTTP requests
|
339
|
-
instead of one).
|
388
|
+
instead of one). LABjs mode can help with loading several smaller bundles
|
389
|
+
in parallel. Your own tests will tell what’s optimal for your
|
340
390
|
situation.
|
341
|
-
|
391
|
+
|
392
|
+
</li>
|
393
|
+
</ul>
|
394
|
+
<h2>More info</h2>
|
395
|
+
<ul>
|
396
|
+
<li><a href="http://mintdigital.github.com/asset_hat/">Official website</a>
|
397
|
+
|
398
|
+
</li>
|
399
|
+
<li><a href="http://mintdigital.github.com/asset_hat/doc/">Full
|
400
|
+
documentation</a>
|
401
|
+
|
402
|
+
</li>
|
403
|
+
<li><a
|
404
|
+
href="http://mintdigital.github.com/asset_hat/doc/files/HISTORY.html">History/changelog</a>
|
405
|
+
|
406
|
+
</li>
|
407
|
+
<li>Released under the <a
|
408
|
+
href="https://github.com/mintdigital/asset_hat/blob/master/LICENSE">MIT
|
409
|
+
license</a>.
|
410
|
+
|
411
|
+
</li>
|
412
|
+
</ul>
|
413
|
+
<h3>Contributing</h3>
|
414
|
+
<p>
|
415
|
+
Have an idea, problem, or bug report? <a
|
416
|
+
href="http://help.github.com/send-pull-requests/">Send a pull request</a>!
|
417
|
+
Please base pull requests on the `development` branch, not the `master`
|
418
|
+
branch.
|
419
|
+
</p>
|
420
|
+
<p>
|
421
|
+
Contributors:
|
422
|
+
</p>
|
423
|
+
<ul>
|
424
|
+
<li><a href="https://github.com/rondevera">rondevera</a> (maintainer; Twitter:
|
425
|
+
<a href="https://twitter.com/#!/ronalddevera">@ronalddevera</a>)
|
426
|
+
|
427
|
+
</li>
|
428
|
+
<li><a href="https://github.com/philnash">philnash</a>
|
429
|
+
|
430
|
+
</li>
|
431
|
+
<li><a href="https://github.com/dstrelau">dstrelau</a>
|
432
|
+
|
433
|
+
</li>
|
434
|
+
<li><a href="https://github.com/daphonz">daphonz</a>
|
435
|
+
|
436
|
+
</li>
|
437
|
+
<li><a href="https://github.com/sauliusg">sauliusg</a>
|
438
|
+
|
439
|
+
</li>
|
440
|
+
<li><a href="https://github.com/jsonperl">jsonperl</a>
|
441
|
+
|
342
442
|
</li>
|
343
443
|
</ul>
|
344
444
|
<h2><a href="http://www.youtube.com/watch?v=V30tyaXv6EI">What is best in AssetHat?</a></h2>
|
345
445
|
<ul>
|
346
446
|
<li>To crush your assets;
|
347
|
-
|
447
|
+
|
348
448
|
</li>
|
349
449
|
<li>See them bundled before you; and
|
350
|
-
|
450
|
+
|
351
451
|
</li>
|
352
452
|
<li>Hear no more lamentation about slow page loads.
|
353
|
-
|
453
|
+
|
354
454
|
</li>
|
355
455
|
</ul>
|
356
456
|
</div>
|