README.md in sinatra-assetpack-0.2.0 vs README.md in sinatra-assetpack-0.2.1

- old
+ new

@@ -1,88 +1,78 @@ # [Sinatra AssetPack](http://ricostacruz.com/sinatra-assetpack) -> Package your assets transparently in Sinatra. +> The most convenient way to manage your assets in Sinatra. [![Build Status](https://travis-ci.org/rstacruz/sinatra-assetpack.png?branch=master)](https://travis-ci.org/rstacruz/sinatra-assetpack) [![Gem Version](https://badge.fury.io/rb/sinatra-assetpack.png)](http://badge.fury.io/rb/sinatra-assetpack) [![Dependency Status](https://gemnasium.com/rstacruz/sinatra-assetpack.png)](https://gemnasium.com/rstacruz/sinatra-assetpack) [![Code Climate](https://codeclimate.com/github/rstacruz/sinatra-assetpack.png)](https://codeclimate.com/github/rstacruz/sinatra-assetpack) -How it works ------------- +## Installation -This is *the* most convenient way to set up your CSS/JS (and images) in a -[Sinatra](http://sinatrarb.com) app. Seriously. No need for crappy routes to -render Sass or whatever. No-siree! - -1. Drop your assets into `/app` like so (you can configure directories don't worry): - * JavaScript/CoffeeScript files in `/app/js` - * CSS/Sass/Less/CSS files in `/app/css` - * Images into `/app/images` -3. Add `register Sinatra::AssetPack` and set up options to your app (see below). -4. Use `<%= js :app %>` and `<%= css :application %>` to your layouts. Use these instead of - messy *script* and *link* tags. -5. BOOM! You're in business baby! - -Installation ------------- - -Add to your `Gemfile` : - ``` ruby +# Gemfile gem 'sinatra-assetpack', :require => 'sinatra/assetpack' ``` +## Setup -Setup ------ +Register the extension and set your assets configuration. -Install the plugin and add some options. (Feel free to omit the *Optional* - items, they're listed here for posterity): - ``` ruby require 'sinatra/assetpack' class App < Sinatra::Base - set :root, File.dirname(__FILE__) + set :root, File.dirname(__FILE__) # You must set app root + register Sinatra::AssetPack assets { - serve '/js', from: 'app/js' # Optional - serve '/css', from: 'app/css' # Optional - serve '/images', from: 'app/images' # Optional + serve '/js', from: 'app/js' # Default + serve '/css', from: 'app/css' # Default + serve '/images', from: 'app/images' # Default # The second parameter defines where the compressed version will be served. # (Note: that parameter is optional, AssetPack will figure it out.) js :app, '/js/app.js', [ '/js/vendor/**/*.js', - '/js/app/**/*.js' + '/js/lib/**/*.js' ] css :application, '/css/application.css', [ '/css/screen.css' ] - js_compression :jsmin # Optional - css_compression :sass # Optional + js_compression :jsmin # :jsmin | :yui | :closure | :uglify + css_compression :simple # :simple | :sass | :yui | :sqwish } end ``` +## Usage + +1. Drop your assets into `/app/css`, `/app/js`, `/app/images`. +2. Add `register Sinatra::AssetPack` (see setup options). +3. Use `<%= js :app %>` and `<%= css :application %>` in your layout. +4. You now have proper assets management! + #### Using in layouts In your layouts, use the `css` and `js` helpers: -*(Use haml? Great! Use `!= css :youreawesome` instead.)* ``` erb +# layout.erb <%= css :application, :media => 'screen' %> <%= js :app %> ``` +``` +# layout.haml +!= css :application, :media => 'screen' +!= css :app +``` +## Results -And then what? --------------- - #### Development mode If you're on **development** mode, it serves each of the files as so: ``` html <link rel='stylesheet' href='/css/screen.849289.css' media='screen' type='text/css' /> @@ -97,12 +87,11 @@ ``` html <link rel='stylesheet' href='/css/application.849289.css' media='screen' type='text/css' /> <script type='text/javascript' src='/js/app.589491.js'></script> ``` -Features --------- +## Features * __CoffeeScript support__ Just add your coffee files in one of the paths served (in the example, `app/js/hello.coffee`) and they will be available as JS files (`http://localhost:4567/js/hello.js`). @@ -127,12 +116,11 @@ * __Auto minification (with caching)__ JS and CSS files will be compressed as needed. * __Heroku support__ Oh yes. That's right. -Compressors ------------ +## Compressors By default, AssetPack uses [JSMin](http://rubygems.org/gems/jsmin) for JS compression, and simple regexes for CSS compression. You can specify other compressors in the `assets` block: @@ -143,45 +131,39 @@ } ``` ### YUI Compressor -This uses Yahoo's Java-powered YUI compressor. For YUI compression, you need the -YUI compressor gem (`gem install yui-compressor`). +This uses Yahoo's Java-powered YUI compressor. ``` ruby assets { js_compression :yui js_compression :yui, :munge => true # Munge variable names css_compression :yui } ``` -__Note:__ This depends on the `yui-compressor` gem. You will need to install it. -(`gem install yui-compressor`) If you use Bundler, you will need to add it to -your Gemfile as well. +__Note:__ This depends on the `yui-compressor` gem : ``` ruby # Gemfile gem 'yui-compressor', :require => 'yui/compressor' ``` ### SASS compression -For SASS compression, you need the Sass gem (`gem install sass`). This treats -the CSS files as Scss files and uses Sass's `:output => :compressed`. +This treats the CSS files as Scss files and uses Sass's `:output => :compressed`. ``` ruby assets { css_compression :sass } ``` -__Note:__ This depends on the `sass` gem. You will need to install it (`gem -install sass`). If you use Bundler, you will need to add it to your Gemfile as -well. +__Note:__ This depends on the `sass` gem : ``` ruby # Gemfile gem 'sass' ``` @@ -230,26 +212,19 @@ js_compression :uglify js_compression :uglify, [options] } ``` -__Note:__ This depends on the `uglifier` gem. In your Gemfile, you will need to -add it. For Heroku support, you will need to add the `therubyracer-heroku` gem -as well. +__Note:__ This depends on the `uglifier` gem : ``` ruby # Gemfile gem 'uglifier' - -# If you're on Heroku: -gem "therubyracer-heroku", "0.8.1.pre3", :require => false ``` +## Images -Images ------- - To show images, use the `img` helper. This automatically adds width, height, and a cache buster thingie. ImageMagick is required to generate full image tags with width and height. ``` html @@ -272,15 +247,12 @@ ``` css /* Original: */ .email { background: url(/images/email.png?embed); } /* Output: */ .email { background: url(data:image/png;base64,NF8dG3I...); } ``` -Need to build the files? ------------------------- +## Precompile -Actually, you don't need to—this is optional! But add this to your `Rakefile`: - ``` ruby # Rakefile APP_FILE = 'app.rb' APP_CLASS = 'App' @@ -291,14 +263,14 @@ Now invoke the `assetpack:build` Rake task. This will create files in `/public`. $ rake assetpack:build -API reference -------------- +## Settings #### Assets block + All configuration happens in the `assets` block. You may invoke it in 2 ways: ``` ruby class App < Sinatra::Base register Sinatra::AssetPack @@ -552,14 +524,39 @@ expires 86400*365, :public } end ``` +### assets.cache_dynamic_assets +Caches dynamic files unless they have been modified. -API reference: helpers ----------------------- +Useful during development if asset compilation of all dynamic assets on each request is slow. +If set to true, dynamic assets will be compiled on the initial asset request, but only be re-compiled when the asset's mtime changes. +``` ruby +# Usage: +cache_dynamic_assets {true|false} +``` + +#### Example +In this example, all dynamic files will be compiled on first request, but later requests will be served from a cache unless the file is modified + +``` ruby +class App < Sinatra::Base + assets { + js_compression :closure + + js :application, [ + '/js/vendor/jquery.*.js', + '/js/vendor/jquery.js' + ] + cache_dynamic_assets true + } +end + +## Helpers + These are helpers you can use in your views. ### <%= css %> Shows a CSS package named `PACKAGE`. If `OPTIONS_HASH` is given, they will we @@ -640,39 +637,24 @@ <!-- Output: --> <img src='/images/icon.834782.png' width='24' height='24' alt='Icon' />` ``` -Need Compass support? ---------------------- +## Compass -No, AssetPack doesn't have built-in [Compass](http://compass-style.org) support, -but you can use [Sinatra Support](http://sinefunc.com/sinatra-support). +AssetPack doesn't have built-in [Compass](http://compass-style.org) +support, but you can include it easily with +[Sinatra Support](https://github.com/sinefunc/sinatra-support/). -For an example of how to use AssetPack with Compass, including on how to use it -to generate image [sprites][compsprite], see the [Compass example -application.][compex] +See also the [Compass example application.][compass] -[compex]: https://github.com/rstacruz/sinatra-assetpack/tree/master/examples/compass -[compsprite]: http://compass-style.org/reference/compass/utilities/sprites/ +[compass]: https://github.com/rstacruz/sinatra-assetpack/tree/master/examples/compass -``` ruby -# gem install sinatra/support -Encoding.default_external = 'utf-8' -require 'sinatra/support' +## Contributing -class Main - register Sinatra::CompassSupport -end -``` - -Contributing ------------- - See [CONTRIBUTING.md](https://github.com/rstacruz/sinatra-assetpack/blob/master/CONTRIBUTING.md) for details on contributing and running test. -Acknowledgements ----------------- +## Acknowledgements © 2011-2013, Rico Sta. Cruz. Released under the [MIT License](http://www.opensource.org/licenses/mit-license.php). Sinatra-AssetPack is authored by [Rico Sta. Cruz][rsc] with help \ No newline at end of file