assets pipline

Author: le0pard

app/assets/stylesheets/group-buttons.css.erb

@@ -71,11 +71,11 @@
 .start {
     display: inline-block;
     padding-left: 13px;
-    background: url(<%= asset_path('play-icon.png') %>) no-repeat 0 -35px;
+    background: url(<%= asset_data_uri('play-icon.png') %>) no-repeat 0 -35px;
 }
 
 .stop {
     display: inline-block;
     padding-left: 13px;
-    background: url(<%= asset_path('stop-icon.png') %>) no-repeat 0 5px;
+    background: url(<%= asset_data_uri('stop-icon.png') %>) no-repeat 0 5px;
 }

app/assets/stylesheets/library.css.erb

@@ -46,12 +46,12 @@ a:hover, a:active {
 
 .success {
     padding-right: 15px;
-    background: url(<%= asset_path('success.png') %>) no-repeat 100% 50%;
+    background: url(<%= asset_data_uri('success.png') %>) no-repeat 100% 50%;
 }
 
 .failure {
     padding-right: 15px;
-    background: url(<%= asset_path('failure.png') %>) no-repeat 100% 50%;
+    background: url(<%= asset_data_uri('failure.png') %>) no-repeat 100% 50%;
 }
 
 .notice {
@@ -62,7 +62,7 @@ a:hover, a:active {
     display: inline-block;
     margin-right: 5px;
     margin-left: -17px;
-/*     background: url(<%= asset_path('success.png') %>) no-repeat 0 0; */
+/*     background: url(<%= asset_data_uri('success.png') %>) no-repeat 0 0; */
 }
 
 .error {
@@ -73,16 +73,16 @@ a:hover, a:active {
     display: inline-block;
     margin-right: 5px;
     margin-left: -17px;
-    background: url(<%= asset_path('failure.png') %>) no-repeat 0 0;
+    background: url(<%= asset_data_uri('failure.png') %>) no-repeat 0 0;
 }
 
 .arrow-down {
     padding-right: 15px;
-    background: url(<%= asset_path('arrow-down.png') %>) no-repeat 100% 50%;
+    background: url(<%= asset_data_uri('arrow-down.png') %>) no-repeat 100% 50%;
 }
 
 .arrow-down.rotate {
-    background: url(<%= asset_path('arrow-up.png') %>) no-repeat 100% 50%;
+    background: url(<%= asset_data_uri('arrow-up.png') %>) no-repeat 100% 50%;
 }
 
 code {
@@ -156,7 +156,7 @@ code {
     font: 12px arial, sans-serif;
     vertical-align: middle;
     border: 1px solid #bbb;
-    background: #fff url(<%= asset_path('date.png') %>) no-repeat 9px 50%;
+    background: #fff url(<%= asset_data_uri('date.png') %>) no-repeat 9px 50%;
     border-radius: 3px;
     box-shadow: 0 1px 2px #e6e6e6 inset, 0 1px 0 #fff;
 }
@@ -230,7 +230,7 @@ li.message_tab {
 
 a[target="_blank"] {
     display: inline-block;
-    background: url(<%= asset_path('external.png') %>) no-repeat 0 3px;
+    background: url(<%= asset_data_uri('external.png') %>) no-repeat 0 3px;
     padding-left: 17px;
 }
 

lib/mongodb_logger/server/sprokets.rb

@@ -1,3 +1,5 @@
+require 'base64'
+require 'rack/utils'
 require 'sprockets'
 
 module MongodbLogger
@@ -6,6 +8,13 @@ module AssetHelpers
     def asset_path(source)
       "/assets/#{Assets.instance.find_asset(source).digest_path}" unless Assets.instance.find_asset(source).nil?
     end
+    def asset_data_uri(source)
+      unless Assets.instance.find_asset(source).nil?
+        asset  = Assets.instance.find_asset(source)
+        base64 = Base64.encode64(asset.to_s).gsub(/\s+/, "")
+        "data:#{asset.content_type};base64,#{Rack::Utils.escape(base64)}"
+      end
+    end
   end
 
   class Assets < Sprockets::Environment

lib/tasks/mongodb_logger.rake

@@ -2,25 +2,37 @@ require 'mongodb_logger/server/sprokets'
 namespace :mongodb_logger do
   namespace :assets do
     desc 'compile assets'
-    task :compile => [:compile_js, :compile_css] do
+    task :compile, [:output_dir] => [:compile_js, :compile_css, :compile_imgs] do
     end
 
     desc 'compile javascript assets'
     task :compile_js, [:output_dir] => :environment do |t, args|
       return (raise "Specify output dir for assets") if args.output_dir.nil?
-      sprockets = MongodbLogger::Assets.instance
-      asset     = sprockets['mongodb_logger.js']
-      asset.write_to(output_dir)
+      sprockets   = MongodbLogger::Assets.instance
+      asset_name  = 'mongodb_logger.js'
+      asset       = sprockets[asset_name]
+      asset.write_to(File.join(args.output_dir, sprockets.find_asset(asset_name).digest_path))
       puts "successfully compiled js assets"
     end
 
     desc 'compile css assets'
     task :compile_css, [:output_dir] => :environment do |t, args|
       return (raise "Specify output dir for assets") if args.output_dir.nil?
-      sprockets = MongodbLogger::Assets.instance
-      asset     = sprockets['mongodb_logger.css']
-      asset.write_to(output_dir)
+      sprockets   = MongodbLogger::Assets.instance
+      asset_name  = 'mongodb_logger.css'
+      asset       = sprockets[asset_name]
+      asset.write_to(File.join(args.output_dir, sprockets.find_asset(asset_name).digest_path))
       puts "successfully compiled css assets"
     end
+    
+    desc 'compile images assets'
+    task :compile_imgs, [:output_dir] => :environment do |t, args|
+      return (raise "Specify output dir for assets") if args.output_dir.nil?
+      sprockets   = MongodbLogger::Assets.instance
+      asset_name  = 'logo.png'
+      asset       = sprockets[asset_name]
+      asset.write_to(File.join(args.output_dir, sprockets.find_asset(asset_name).digest_path))
+      puts "successfully compiled images assets"
+    end
   end
 end