Git Product home page Git Product logo

bagger's Introduction

bagger

A framework agnostic packaging solution to speed up loading times on the client side by using the following techniques:

  • Generate versioned assets to maximize cache efficiency
  • Combine and minify javascript and css files to reduce bandwidth
  • Generate a file manifest to lookup an asset's location
  • Generate an HTML 5 cache manifest
  • Rewrite urls in css files with the versioned file name

Features already implemented in version 0.0.1

  • Combines javascript
  • Minfies javascript with UglifyJS
  • Combines stylesheets
  • Rewrites urls in stylesheets
  • Minfies stylesheets with rainpress
  • Generates versioned file names e.g /images/logo.19db9a16e2b73017c575570de577d103.png
  • Generates a manifest file in JSON
  • Generates an HTML 5 cache manifest

Installation

gem install bagger

Usage

require 'bagger'
require 'fileutils'

# define source and target directories
target_dir = "/tmp/bundled_assets"
source_dir = "/applications/my_app/public"

# customize paths for file and cache manifest
manifest_path = File.join(target_dir, 'file_manifest.json') # defaults to manifest.json

cache_manifest_path = 'cache/cache.manifest' # defaults to cache.manifest

# list the stylesheets and javascripts to be combined
# and minified. The order is important, because otherwhise
# the behavior of the stylesheets and javascripts might change
stylesheets = ["css/style.css", "css/reset.css"]
javascripts = ["js/app.js", "js/utils.js"]

# define cache manifest bundles for different devices
# for convenience, the manifest defined with `cache_manifest_path`
# will always contain all resources
ipad_resources = ["images/troll-big.png"]
iphone_retina_resources = ["images/troll-retina.png"]
desktop_browser_resources = ["images/troll.png"]

# make sure the target directory exists
FileUtils.mkdir_p target_dir

# define the options hash
options = {
	:source_dir => source_dir,
	:target_dir => target_dir,
	:manifest_path => manifest_path,
:gzip => false,
:verbose => false,
	:cache_manifest_path => cache_manifest_path,
		:path_prefix => '',
		:css_path_prefix => '',
		:exclude_pattern => /.*\.less/,
		:exclude_files => [ 'css/main.sass', 'css/style.sass' ]
	:combine => {
	 :stylesheets => [
	    {
	      :target_path => 'css/all.css',
	      :files => stylesheets
	    }
	  ],
	 :javascripts => [
	    {
	      :target_path => 'js/combined.js',
	      :files => javascripts
	    }
	  ]
	},
	:cache_manifests => [
	  {
	    :target_path => 'cache/ipad-cache.manifest',
	    :files => ipad_resources
	  },
	  {
	    :target_path => 'cache/retina-cache.manifest',
	    :files => iphone_retina_resources
	  },
	  {
	    :target_path => 'cache/desktop.manifest',
	    :files => desktop_browser_resources
	  }
	]
}

# run it
Bagger::bagit!(options)

manifest_path = File.join(target_dir, 'manifest.json')
cache_manifest_path = File.join(target_dir, 'cache.json')

Manifest layout

{
  "/css/all.css" : "/css/all.19db9a16e2b73017c575570de577d103.css",
  "/js/combined.js" : "/js/combined.19db9a16e2b73017c575570de577d103.js",
  "/images/logo.png" : "/images/logo.19db9a16e2b73017c575570de577d103.png" 
}

HTML 5 cache manifest

CACHE MANIFEST

# Explicitely cached entries
/css/all.19db9a16e2b73017c575570de577d103.css
/js/combined.19db9a16e2b73017c575570de577d103.js
/images/logo.19db9a16e2b73017c575570de577d103.png

NETWORK:
*

Tests

check the build status on travis.ci

Similar projects

bagger's People

Contributors

phuesler avatar chrisavl avatar floere avatar hdragomir avatar michaelklishin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.