PageRenderTime 27ms CodeModel.GetById 16ms RepoModel.GetById 0ms app.codeStats 0ms

/vendor/bundle/ruby/1.8/gems/sprockets-2.0.0/README.md

https://github.com/regcrusher/cbx
Markdown | 356 lines | 257 code | 99 blank | 0 comment | 0 complexity | dd8429f046068e7509acba8d7702a4eb MD5 | raw file
  1. # Sprockets: Rack-based asset packaging
  2. Sprockets is a Ruby library for compiling and serving web assets.
  3. It features declarative dependency management for JavaScript and CSS
  4. assets, as well as a powerful preprocessor pipeline that allows you to
  5. write assets in languages like CoffeeScript, Sass, SCSS and LESS.
  6. # Installation #
  7. Install Sprockets from RubyGems:
  8. $ gem install sprockets
  9. Or include it in your project's `Gemfile` with Bundler:
  10. gem 'sprockets', '~> 2.0'
  11. # Understanding the Sprockets Environment #
  12. You'll need an instance of the `Sprockets::Environment` class to
  13. access and serve assets from your application. Under Rails 3.1 and
  14. later, `YourApp::Application.assets` is a preconfigured
  15. `Sprockets::Environment` instance. For Rack-based applications, create
  16. an instance in `config.ru`.
  17. The Sprockets `Environment` has methods for retrieving and serving
  18. assets, manipulating the load path, and registering processors. It is
  19. also a Rack application that can be mounted at a URL to serve assets
  20. over HTTP.
  21. ## The Load Path ##
  22. The *load path* is an ordered list of directories that Sprockets uses
  23. to search for assets.
  24. In the simplest case, a Sprockets environment's load path will consist
  25. of a single directory containing your application's asset source
  26. files. When mounted, the environment will serve assets from this
  27. directory as if they were static files in your public root.
  28. The power of the load path is that it lets you organize your source
  29. files into multiple directories -- even directories that live outside
  30. your application -- and combine those directories into a single
  31. virtual filesystem. That means you can easily bundle JavaScript, CSS
  32. and images into a Ruby library and import them into your application.
  33. ### Manipulating the Load Path ###
  34. To add a directory to your environment's load path, use the
  35. `append_path` and `prepend_path` methods. Directories at the beginning
  36. of the load path have precedence over subsequent directories.
  37. environment = Sprockets::Environment.new
  38. environment.append_path 'app/assets/javascripts'
  39. environment.append_path 'lib/assets/javascripts'
  40. environment.append_path 'vendor/assets/jquery'
  41. In general, you should append to the path by default and reserve
  42. prepending for cases where you need to override existing assets.
  43. ## Accessing Assets ##
  44. Once you've set up your environment's load path, you can mount the
  45. environment as a Rack server and request assets via HTTP. You can also
  46. access assets programmatically from within your application.
  47. ### Logical Paths ###
  48. Assets in Sprockets are always referenced by their *logical path*.
  49. The logical path is the path of the asset source file relative to its
  50. containing directory in the load path. For example, if your load path
  51. contains the directory `app/assets/javascripts`:
  52. <table>
  53. <tr>
  54. <th>Asset source file</th>
  55. <th>Logical path</th>
  56. </tr>
  57. <tr>
  58. <td>app/assets/javascripts/application.js</td>
  59. <td>application.js</td>
  60. </tr>
  61. <tr>
  62. <td>app/assets/javascripts/models/project.js</td>
  63. <td>models/project.js</td>
  64. </tr>
  65. </table>
  66. In this way, all directories in the load path are merged to create a
  67. virtual filesystem whose entries are logical paths.
  68. ### Serving Assets Over HTTP ###
  69. When you mount an environment, all of its assets are accessible as
  70. logical paths underneath the *mount point*. For example, if you mount
  71. your environment at `/assets` and request the URL
  72. `/assets/application.js`, Sprockets will search your load path for the
  73. file named `application.js` and serve it.
  74. Under Rails 3.1 and later, your Sprockets environment is automatically
  75. mounted at `/assets`. If you are using Sprockets with a Rack
  76. application, you will need to mount the environment yourself. A good
  77. way to do this is with the `map` method in `config.ru`:
  78. require 'sprockets'
  79. map '/assets' do
  80. environment = Sprockets::Environment.new
  81. environment.append_path 'app/assets/javascripts'
  82. environment.append_path 'app/assets/stylesheets'
  83. run environment
  84. end
  85. ### Accessing Assets Programmatically ###
  86. You can use the `find_asset` method (aliased as `[]`) to retrieve an
  87. asset from a Sprockets environment. Pass it a logical path and you'll
  88. get a `Sprockets::BundledAsset` instance back:
  89. environment['application.js']
  90. # => #<Sprockets::BundledAsset ...>
  91. Call `to_s` on the resulting asset to access its contents, `length` to
  92. get its length in bytes, `mtime` to query its last-modified time, and
  93. `pathname` to get its full path on the filesystem.
  94. # Using Engines #
  95. Asset source files can be written in another language, like SCSS or
  96. CoffeeScript, and automatically compiled to CSS or JavaScript by
  97. Sprockets. Compilers for these languages are called *engines*.
  98. Engines are specified by additional extensions on the asset source
  99. filename. For example, a CSS file written in SCSS might have the name
  100. `layout.css.scss`, while a JavaScript file written in CoffeeScript
  101. might have the name `dialog.js.coffee`.
  102. ## Styling with Sass and SCSS ##
  103. [Sass](http://sass-lang.com/) is a language that compiles to CSS and
  104. adds features like nested rules, variables, mixins and selector
  105. inheritance.
  106. If the `sass` gem is available to your application, you can use Sass
  107. to write CSS assets in Sprockets.
  108. Sprockets supports both Sass syntaxes. For the original
  109. whitespace-sensitive syntax, use the extension `.css.sass`. For the
  110. new SCSS syntax, use the extension `.css.scss`.
  111. ## Styling with LESS ##
  112. [LESS](http://lesscss.org/) extends CSS with dynamic behavior such as
  113. variables, mixins, operations and functions.
  114. If the `less` gem is available to your application, you can use LESS
  115. to write CSS assets in Sprockets. Note that the LESS compiler is
  116. written in JavaScript, and at the time of this writing, the `less` gem
  117. depends on `therubyracer` which embeds the V8 JavaScript runtime in
  118. Ruby.
  119. To write CSS assets with LESS, use the extension `.css.less`.
  120. ## Scripting with CoffeeScript ##
  121. [CoffeeScript](http://jashkenas.github.com/coffee-script/) is a
  122. language that compiles to the "good parts" of JavaScript, featuring a
  123. cleaner syntax with array comprehensions, classes, and function
  124. binding.
  125. If the `coffee-script` gem is available to your application, you can
  126. use CoffeeScript to write JavaScript assets in Sprockets. Note that
  127. the CoffeeScript compiler is written in JavaScript, and you will need
  128. an [ExecJS](https://github.com/sstephenson/execjs)-supported runtime
  129. on your system to invoke it.
  130. To write JavaScript assets with CoffeeScript, use the extension
  131. `.js.coffee`.
  132. ## JavaScript Templating with EJS and Eco ##
  133. Sprockets supports *JavaScript templates* for client-side rendering of
  134. strings or markup. JavaScript templates have the special format
  135. extension `.jst` and are compiled to JavaScript functions.
  136. When loaded, a JavaScript template function can be accessed by its
  137. logical path as a property on the global `JST` object. Invoke a
  138. template function to render the template as a string. The resulting
  139. string can then be inserted into the DOM.
  140. <!-- templates/hello.jst.ejs -->
  141. <div>Hello, <span><%= name %></span>!</div>
  142. // application.js
  143. //= require templates/hello
  144. $("#hello").html(JST["templates/hello"]({ name: "Sam" }));
  145. Sprockets supports two JavaScript template languages:
  146. [EJS](https://github.com/sstephenson/ruby-ejs), for embedded
  147. JavaScript, and [Eco](https://github.com/sstephenson/ruby-eco), for
  148. embedded CoffeeScript. Both languages use the familiar `<% … %>`
  149. syntax for embedding logic in templates.
  150. If the `ejs` gem is available to your application, you can use EJS
  151. templates in Sprockets. EJS templates have the extension `.jst.ejs`.
  152. If the `eco` gem is available to your application, you can use [Eco
  153. templates](https://github.com/sstephenson/eco) in Sprockets. Eco
  154. templates have the extension `.jst.eco`. Note that the `eco` gem
  155. depends on the CoffeeScript compiler, so the same caveats apply as
  156. outlined above for the CoffeeScript engine.
  157. ## Invoking Ruby with ERB ##
  158. Sprockets provides an ERB engine for preprocessing assets using
  159. embedded Ruby code. Append `.erb` to a CSS or JavaScript asset's
  160. filename to enable the ERB engine.
  161. **Note**: Sprockets processes multiple engine extensions in order from
  162. right to left, so you can use multiple engines with a single
  163. asset. For example, to have a CoffeeScript asset that is first
  164. preprocessed with ERB, use the extension `.js.coffee.erb`.
  165. Ruby code embedded in an asset is evaluated in the context of a
  166. `Sprockets::Context` instance for the given asset. Common uses for ERB
  167. include:
  168. - embedding another asset as a Base64-encoded `data:` URI with the
  169. `asset_data_uri` helper
  170. - inserting the URL to another asset, such as with the `asset_path`
  171. helper provided by the Sprockets Rails plugin
  172. - embedding other application resources, such as a localized string
  173. database, in a JavaScript asset via JSON
  174. - embedding version constants loaded from another file
  175. See the [Helper Methods](#FIXME) section for more information about
  176. interacting with `Sprockets::Context` instances via ERB.
  177. ### String Interpolation Syntax ###
  178. If you need access to Ruby from an asset but cannot use ERB's `<% …
  179. %>` syntax, Sprockets also supports Ruby string interpolation syntax
  180. (`#{ }`) with the `.str` engine extension.
  181. # Managing and Bundling Dependencies #
  182. You can create *asset bundles* -- ordered concatenations of asset
  183. source files -- by specifying dependencies in a special comment syntax
  184. at the top of each source file.
  185. Sprockets reads these comments, called *directives*, and processes
  186. them to recursively build a dependency graph. When you request an
  187. asset with dependencies, the dependencies will be included in order at
  188. the top of the file.
  189. ## The Directive Processor ##
  190. Sprockets runs the *directive processor* on each CSS and JavaScript
  191. source file. The directive processor scans for comment lines beginning
  192. with `=` in comment blocks at the top of the file.
  193. //= require jquery
  194. //= require jquery-ui
  195. //= require backbone
  196. //= require_tree .
  197. The first word immediately following `=` specifies the directive
  198. name. Any words following the directive name are treated as
  199. arguments. Arguments may be placed in single or double quotes if they
  200. contain spaces, similar to commands in the Unix shell.
  201. **Note**: Non-directive comment lines will be preserved in the final
  202. asset, but directive comments are stripped after
  203. processing. Sprockets will not look for directives in comment blocks
  204. that occur after the first line of code.
  205. ### Supported Comment Types ###
  206. The directive processor understands comment blocks in three formats:
  207. /* Multi-line comment blocks (CSS, SCSS, JavaScript)
  208. *= require foo
  209. */
  210. // Single-line comment blocks (SCSS, JavaScript)
  211. //= require foo
  212. # Single-line comment blocks (CoffeeScript)
  213. #= require foo
  214. ## Sprockets Directives ##
  215. You can use the following directives to declare dependencies in asset
  216. source files.
  217. For directives that take a *path* argument, you may specify either a
  218. logical path or a relative path. Relative paths begin with `./` and
  219. reference files relative to the location of the current file.
  220. ### The `require` Directive ###
  221. `require` *path* inserts the contents of the asset source file
  222. specified by *path*. If the file is required multiple times, it will
  223. appear in the bundle only once.
  224. ### The `include` Directive ###
  225. `include` *path* works like `require`, but inserts the contents of the
  226. specified source file even if it has already been included or
  227. required.
  228. ### The `require_directory` Directive ###
  229. `require_directory` *path* requires all source files of the same
  230. format in the directory specified by *path*. Files are required in
  231. alphabetical order.
  232. ### The `require_tree` Directive ###
  233. `require_tree` *path* works like `require_directory`, but operates
  234. recursively to require all files in all subdirectories of the
  235. directory specified by *path*.
  236. ### The `require_self` Directive ###
  237. `require_self` tells Sprockets to insert the body of the current
  238. source file before any subsequent `require` or `include` directives.
  239. ### The `depend_on` Directive ###
  240. `depend_on` *path* declares a dependency on the given *path* without
  241. including it in the bundle. This is useful when you need to expire an
  242. asset's cache in response to a change in another file.
  243. # Contributing #
  244. The Sprockets source code is [hosted on
  245. GitHub](https://github.com/sstephenson/sprockets). You can check out a
  246. copy of the latest code using Git:
  247. $ git clone https://github.com/sstephenson/sprockets.git
  248. If you've found a bug or have a question, please open an issue on the
  249. [Sprockets issue
  250. tracker](https://github.com/sstephenson/sprockets/issues). Or, clone
  251. the Sprockets repository, write a failing test case, fix the bug and
  252. submit a pull request.
  253. # License #
  254. Copyright &copy; 2011 Sam Stephenson <<sstephenson@gmail.com>>
  255. Copyright &copy; 2011 Joshua Peek <<josh@joshpeek.com>>
  256. Sprockets is distributed under an MIT-style license. See LICENSE for
  257. details.