Changeset 1136

Timestamp:

12/28/07 21:18:32 (1 year ago)

Author:

coda.ha..@gmail.com

Message:

Added asset bundling for Javascript and stylesheet files with the :bundle option for js_include_tag, css_include_tag, include_required_js, and include_required_css.

Files:

• trunk/CHANGELOG (modified) (1 diff)
• trunk/app_generators/merb/templates/config/merb.yml (modified) (1 diff)
• trunk/lib/merb.rb (modified) (1 diff)
• trunk/lib/merb/assets.rb (added)
• trunk/lib/merb/mixins/view_context.rb (modified) (8 diffs)
• trunk/spec/merb/assets_spec.rb (added)
• trunk/spec/merb/view_context_spec.rb (modified) (7 diffs)

trunk/CHANGELOG

@@ -1 +1 @@
-== 0.5.0 "The big cleanup." 2008-01-31
+* Added asset bundling for Javascript and stylesheet files
-
-

trunk/app_generators/merb/templates/config/merb.yml

@@ -32 +32 @@
-# automatically in production mode.
-#:cache_templates: true
+
+# Uncomment to bundle assets in dev mode. Assets are automatically bundled in
+# production mode.
+#:bundle_assets: true
-
-# this is true if you want mongrel to emulate the X-Sendfile header internally,

trunk/lib/merb.rb

@@ -66 +66 @@
-  autoload :Plugins, 'merb/plugins'
-  autoload :Rack,'merb/rack_adapter'
+  autoload :Assets, 'merb/assets'
-
-  # Set up Merb::Server.config[] as an accessor for @@merb_opts

trunk/lib/merb/mixins/view_context.rb

@@ -3 +3 @@
-  # linking to assets and other pages, dealing with JavaScript, and caching.
-  module ViewContextMixin
+    
+    include Merb::Assets::AssetHelpers
+    
-    # :section: Accessing Assets
-    # Merb provides views with convenience methods for links images and other assets.
@@ -163 +166 @@
-    # See each method's documentation for more information.
-    
+    # :section: Bundling Asset Files
+    # 
+    # The key to making a fast web application is to reduce both the amount of
+    # data transfered and the number of client-server interactions. While having
+    # many small, module Javascript or stylesheet files aids in the development
+    # process, your web application will benefit from bundling those assets in
+    # the production environment.
+    # 
+    # An asset bundle is a set of asset files which are combined into a single
+    # file. This reduces the number of requests required to render a page, and
+    # can reduce the amount of data transfer required if you're using gzip
+    # encoding.
+    # 
+    # Asset bundling is always enabled in production mode, and can be optionally
+    # enabled in all environments by setting the <tt>:bundle_assets</tt> value
+    # in <tt>config/merb.yml</tt> to +true+.
+    # 
+    # ==== Examples
+    # 
+    # In the development environment, this:
+    # 
+    #   js_include_tag :prototype, :lowpro, :bundle => true
+    # 
+    # will produce two <script> elements. In the production mode, however, the
+    # two files will be concatenated in the order given into a single file,
+    # <tt>all.js</tt>, in the <tt>public/javascripts</tt> directory.
+    # 
+    # To specify a different bundle name:
+    # 
+    #   css_include_tag :typography, :whitespace, :bundle => :base
+    #   css_include_tag :header, :footer, :bundle => "content"
+    #   css_include_tag :lightbox, :images, :bundle => "lb.css"
+    # 
+    # (<tt>base.css</tt>, <tt>content.css</tt>, and <tt>lb.css</tt> will all be
+    # created in the <tt>public/stylesheets</tt> directory.)
+    # 
+    # == Callbacks
+    # 
+    # To use a Javascript or CSS compressor, like JSMin or YUI Compressor:
+    # 
+    #   Merb::Assets::JavascriptAssetBundler.add_callback do |filename|
+    #     system("/usr/local/bin/yui-compress #{filename}")
+    #   end
+    #   
+    #   Merb::Assets::StylesheetAssetBundler.add_callback do |filename|
+    #     system("/usr/local/bin/css-min #{filename}")
+    #   end
+    # 
+    # These blocks will be run after a bundle is created.
+    # 
+    # == Bundling Required Assets
+    # 
+    # Combining the +require_css+ and +require_js+ helpers with bundling can be
+    # problematic. You may want to separate out the common assets for your
+    # application -- Javascript frameworks, common CSS, etc. -- and bundle those
+    # in a "base" bundle. Then, for each section of your site, bundle the
+    # required assets into a section-specific bundle.
+    # 
+    # <b>N.B.: If you bundle an inconsistent set of assets with the same name,
+    # you will have inconsistent results. Be thorough and test often.</b>
+    # 
+    # ==== Example
+    # 
+    # In your application layout:
+    # 
+    #   js_include_tag :prototype, :lowpro, :bundle => :base
+    # 
+    # In your controller layout:
+    # 
+    #   require_js :bundle => :posts
+    
-    # The require_js method can be used to require any JavaScript
-    # file anywhere in your templates. Regardless of how many times
@@ -183 +257 @@
-    end
-    
-c
+s
-    # file anywhere in your templates. Regardless of how many times
-    # a single stylesheet is included with require_css, Merb will only include
@@ -205 +279 @@
-    # A method used in the layout of an application to create +<script>+ tags to include JavaScripts required in 
-    # in templates and subtemplates using require_js.
-
+
+
+
+
+
+
+
-    # ==== Examples
-    #   # my_action.herb has a call to require_js 'jquery'
@@ -219 +299 @@
-    #   #    <script src="/javascripts/validation.js" type="text/javascript"></script>
-    #
-
+(options = {})
-      return '' if @required_js.nil?
-@required_js
+(@required_js + [options])
-    end
-    
-    # A method used in the layout of an application to create +<link>+ tags for CSS stylesheets required in 
-    # in templates and subtemplates using require_css.
-
+
+
+
+
+
+
+
-    # ==== Examples
-    #   # my_action.herb has a call to require_css 'style'
@@ -239 +325 @@
-    #   #    <link href="/stylesheets/ie-specific.css" media="all" rel="Stylesheet" type="text/css"/>
-    #
-
+(options = {})
-      return '' if @required_css.nil?
-@required_css
+(@required_css + [options])
-    end
-    
@@ -247 +333 @@
-    # +<include>+ tag for each script named in the arguments, appending
-    # '.js' if it is left out of the call.
-
+
+
+
+
+
+
+
-    # ==== Examples
-    #   js_include_tag 'jquery'
-></script
+ /
-    #
-    #   js_include_tag 'moofx.js', 'upload'
-></script
-></script
+ /
+ /
-    #
-    #   js_include_tag :effects
-></script
+ /
-    #
-    #   js_include_tag :jquery, :validation
-></script
-></script
+ /
+ /
-    #
-    def js_include_tag(*scripts)
+      options = scripts.last.is_a?(Hash) ? scripts.pop : {}
-      return nil if scripts.empty?
-
-
-
-
-
-
+
+
+
+
+
-      end
-
+
+
+
+
+
+
+
+
+
+
+
+
-    end
-    
@@ -278 +381 @@
-    # +<link>+ tag for each stylesheet named in the arguments, appending
-    # '.css' if it is left out of the call.
+    # 
+    # ==== Options
+    # bundle::  The name of the bundle the stylesheets should be combined into.
+    #           If +nil+ or +false+, the bundle is not created. If +true+, a
+    #           bundle named <tt>all.css</tt> is created. Otherwise,
+    #           <tt>:bundle</tt> is treated as an asset name.
+    # media::   The media attribute for the generated link element. Defaults
+    #           to <tt>:all</tt>.
-    #
-    # ==== Examples
-    #   css_include_tag 'style'
-
+ 
-    #
-    #   css_include_tag 'style.css', 'layout'
-
-
+ 
+ 
-    #
-    #   css_include_tag :menu
-
+ 
-    #
-    #   css_include_tag :style, :screen
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-      end
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    end
-    

trunk/spec/merb/view_context_spec.rb

@@ -57 +57 @@
-                                :media => "all",
-                                :rel => "Stylesheet",
-
+
+
-
-    css_include_tag('foo').should == css_include_tag('foo.css')
@@ -63 +64 @@
-      css_include_tag('foo') + css_include_tag('bar')
-  end
+  
+  it "should alter the 'media' attribute based on the provided options" do
+    tag = css_include_tag('foo.css', :media => :screen)
+    tag.should match_tag(:link, :href => "/stylesheets/foo.css",
+                                :media => "screen",
+                                :rel => "Stylesheet",
+                                :type => "text/css",
+                                :content => nil)
+  end
-
-  it "should render a link tag with a path_prefix" do
@@ -71 +81 @@
-                                :media => "all",
-                                :rel => "Stylesheet",
-
+
+
-
-    Merb::Server.config.delete(:path_prefix)
@@ -87 +98 @@
-end
-
+describe "View Context", "css tag with bundles" do
+
+  include Merb::ViewContextMixin
+  
+  before(:each) do
+    @bundler = mock(:bundler)
+    Merb::Assets.stub!(:bundle?).and_return(true)
+    Merb::Assets::StylesheetAssetBundler.stub!(:new).and_return(@bundler)
+    @bundler.stub!(:bundle!).and_return(:all)
+  end
+  
+  it "should not bundle stylesheets if asset bundling is disabled" do
+    Merb::Assets.should_receive(:bundle?).and_return(false)
+    
+    tag = css_include_tag(:fonts, :colors, :bundle => true)
+    tag.should == css_include_tag(:fonts) + css_include_tag(:colors)
+  end
+  
+  it "should not bundle stylesheets if only a single stylesheet was provided" do
+    css_include_tag(:fonts, :bundle => true).should == css_include_tag(:fonts)
+  end
+  
+  it "should bundle all stylesheets as 'all.css' if no bundle name is provided" do
+    Merb::Assets.should_receive(:bundle?).and_return(true)
+    Merb::Assets::StylesheetAssetBundler.should_receive(:new).with(true, :fonts, :colors).and_return(@bundler)
+    @bundler.should_receive(:bundle!).and_return(:all)
+    
+    tag = css_include_tag(:fonts, :colors, :bundle => true)
+    tag.should match_tag(:link, :href => "/stylesheets/all.css",
+                                :media => "all",
+                                :rel => "Stylesheet",
+                                :type => "text/css",
+                                :content => nil)
+  end
+  
+  it "should bundle all stylesheets whatever bundle name is provided" do
+    Merb::Assets.should_receive(:bundle?).and_return(true)
+    Merb::Assets::StylesheetAssetBundler.should_receive(:new).with(:base, :fonts, :colors).and_return(@bundler)
+    @bundler.should_receive(:bundle!).and_return(:base)
+    
+    tag = css_include_tag(:fonts, :colors, :bundle => :base)
+    tag.should match_tag(:link, :href => "/stylesheets/base.css",
+                                :media => "all",
+                                :rel => "Stylesheet",
+                                :type => "text/css",
+                                :content => nil)
+  end
+  
+  it "should not generate a stylesheet tag with the include_required_css" do
+    include_required_css(:bundle => true).clean.should == ''
+  end
+
+  it "should generate stylesheet tags with the include_required_css" do
+    Merb::Assets.should_receive(:bundle?).and_return(true)
+    Merb::Assets::StylesheetAssetBundler.should_receive(:new).with(true, :fonts, :colors).and_return(@bundler)
+    @bundler.should_receive(:bundle!).and_return(:all)
+    
+    require_css(:fonts)
+    require_css(:colors)
+    tag = include_required_css(:bundle => true)
+    
+    tag.should match_tag(:link, :href => "/stylesheets/all.css",
+                                :media => "all",
+                                :rel => "Stylesheet",
+                                :type => "text/css",
+                                :content => nil)
+  end
+end
+
-describe "View Context", "script tag" do
-
@@ -95 +175 @@
-    tag.should match_tag(:script, :src => "/javascripts/foo.js",
-                                  :type => "text/javascript",
-'//'
+nil
-
-    js_include_tag('foo').should == js_include_tag('foo.js')
@@ -108 +188 @@
-    tag.should match_tag(:script, :src => "/inky/javascripts/foo.js",
-                                  :type => "text/javascript",
-'//'
+nil
-
-    Merb::Server.config.delete(:path_prefix)
@@ -124 +204 @@
-end
-
+describe "View Context", "script tag with bundles" do
+
+  include Merb::ViewContextMixin
+  
+  before(:each) do
+    @bundler = mock(:bundler)
+    Merb::Assets.stub!(:bundle?).and_return(true)
+    Merb::Assets::JavascriptAssetBundler.stub!(:new).and_return(@bundler)
+    @bundler.stub!(:bundle!).and_return(:all)
+  end
+  
+  it "should not bundle scripts if asset bundling is disabled" do
+    Merb::Assets.should_receive(:bundle?).and_return(false)
+    
+    tag = js_include_tag(:prototype, :lowpro, :bundle => true)
+    tag.should == js_include_tag(:prototype) + js_include_tag(:lowpro)
+  end
+  
+  it "should not bundle scripts if only a single script was provided" do
+    css_include_tag(:prototype, :bundle => true).should == css_include_tag(:prototype)
+  end
+  
+  it "should bundle all scripts as 'all.js' if no bundle name is provided" do
+    Merb::Assets.should_receive(:bundle?).and_return(true)
+    Merb::Assets::JavascriptAssetBundler.should_receive(:new).with(true, :prototype, :lowpro).and_return(@bundler)
+    @bundler.should_receive(:bundle!).and_return(:all)
+    
+    tag = js_include_tag(:prototype, :lowpro, :bundle => true)
+    tag.should match_tag(:script, :src => "/javascripts/all.js",
+                                  :type => "text/javascript",
+                                  :content => nil)
+  end
+  
+  it "should bundle all stylesheets whatever bundle name is provided" do
+    Merb::Assets.should_receive(:bundle?).and_return(true)
+    Merb::Assets::JavascriptAssetBundler.should_receive(:new).with(:base, :prototype, :lowpro).and_return(@bundler)
+    @bundler.should_receive(:bundle!).and_return(:base)
+
+    tag = js_include_tag(:prototype, :lowpro, :bundle => :base)
+    tag.should match_tag(:script, :src => "/javascripts/base.js",
+                                  :type => "text/javascript",
+                                  :content => nil)
+  end
+  
+  it "should not generate a script tag with the include_required_js" do
+    include_required_js(:bundle => true).clean.should == ''
+  end
+
+  it "should generate script tags with the include_required_js" do
+    Merb::Assets.should_receive(:bundle?).and_return(true)
+    Merb::Assets::JavascriptAssetBundler.should_receive(:new).with(true, :prototype, :lowpro).and_return(@bundler)
+    @bundler.should_receive(:bundle!).and_return(:all)
+    
+    require_js(:prototype)
+    require_js(:lowpro)
+    
+    tag = include_required_js(:bundle => true)
+    tag.should match_tag(:script, :src => "/javascripts/all.js",
+                                  :type => "text/javascript",
+                                  :content => nil)
+  end
+end
+
-describe "View Context", "throw_content, catch_content" do
-