Jekyll::Assets

Jekyll plugin, that adds Rails-alike assets pipeline, that means that:

It allows you to write javascript/css assets in other languages such as CoffeeScript, Sass, Less and ERB.
It allows you to specify dependencies between your assets and automatically concatenates them.
It allows you to minify/compress your JavaScript and CSS assets using compressor you like: YUI, SASS, Uglifier or no compression at all.
It supports JavaScript templates for client-side rendering of strings or markup. JavaScript templates have the special format extension .jst and are compiled to JavaScript functions.
Adds MD5 fingerprint suffix for cache busting. That means your app.css will become app-908e25f4bf641868d8683022a5b62f54.css. See cachebust configuration option for other variants.
Produce gzipped versions of assets. See gzip configuration option for details.

Jekyll-Assets uses fabulous Sprockets under the hood, so you may refer to Rails guide about Asset Pipeline for detailed information about amazing features it gives you.

Note: You must have an ExecJS supported runtime in order to use CoffeeScript.

For a quick start check out jekyll-assets introduction that shows how to use it step by step. Also you might want to take a look on my blog sources as a real-world example as well.

Installation

Add this line to your application's Gemfile:

gem 'jekyll-assets'

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-assets

How to Use Jekyll-Assets

First of all make sure to require it. Common practice is to add following line into _plugins/ext.rb file:

require "jekyll-assets"

Once plugin installed, you'll have following Liquid tags available:

{% javascript app %}: Generates <script> tag for app.js
{% stylesheet app %}: Generates <link> tag for app.css
{% image logo.png %}: Generates <img> tag for logo.png
{% asset_path logo.png %}: Returns resulting URL for logo.png
{% asset app.css %}: Returns compiled body of app.css

You can pass extra attributes to javascript, stylesheet and image tags:

{% image logo.png alt="Logo" %}
{% javascript app async %}
{% stylesheet app actually="anything" you might='want' %}

<!-- renders to something like this (linebreaks in tags for readability here) -->

<img src="/assets/logo-68b329da9893e34099c7d8ad5cb9c940.png" alt="Logo">
<script src="/assets/app-6b95b1b3231c52113ca34ae9d1b5dabf.js" async></script>
<link rel="stylesheet" href="/assets/app-349212fba570137adfec745e37b6d7fb.css"
      actually="anything" you might='want'>

<!-- NOTICE !!! if your asset file contains spaces, surround it's name with quotes -->

{% asset_path "my logo.png" %}
{% asset_path 'my logo.png' %}

Also you'll have complimentary Liquid filters as well:

{{ 'app' | javascript }}: Generates <script> tag for app.js
{{ 'app' | stylesheet }}: Generates <link> tag for app.css
{{ 'logo.png' | image }}: Generates <img> tag for logo.png
{{ 'logo.png' | asset_path }}: Returns resulting URL for logo.png
{{ 'app.css' | asset }}: Returns compiled body of app.css

Filters are used mostly to render tag (or asset source) using variable that holds value of asset logical path rather than specifiyng it directly. Here's an example that speaks for itself:

{% if page.custom_css %}{{ page.custom_css | stylesheet }}{% endif %}

All compiled assets will be stored under assets/ dir of generated site.

Pipeline assets should be under your sources directory of Jekyll site. When a file is referenced with liquid tag or with helper from another asset, Sprockets searches the three default asset locations for it: _assets/images, _assets/javascripts and _assets/stylesheets.

For example these files:

_assets/stylesheets/app.css
_assets/javascripts/app.js
_assets/javascripts/vendor/jquery.js

would be referenced like this:

{% stylesheet app %}
{% javascript app %}
{% javascript vendor/jquery %}

You might want to require vendor/jquery.js into your app.js. To do so, just put following line in the beginning of your app.js to get it concatenated:

//= require vendor/jquery

$(function () {
  alert('I love BIG BOOKS!');
});

If you want to use CoffeScript, just add .coffee suffix to the file you want and you're good to go. For example, here's how your app.js.coffe might look like:

#= require vendor/jquery

$ ->
  alert 'I love BIG BOOKS! And small ones too!'

Notice, that vendor/jquery is not required to be coffee script. You can easily mix CoffeeScript and vanilla JavaScript, CSS and SCSS and SASS and LESS. The difference is only in comments styles used with directives.

See detailed information about these directives below.

You might also want your stylesheets and javascripts to be minified. In this case just install the uglifier gem and any other gems you will be using, e.g. sass, coffee-script. Then add following lines into your config.yml:

assets:
  js_compressor:  uglifier
  css_compressor: sass

If you want to use YUI compressor for minification, install yui-compressor gem and put yui in place of uglifier and/or sass in the config file. You can also define and use your own compressor, see "Custom Compressors".

Let's go crazy now! Assume you want your blog's body background color to be white all the time, but red if you compiled your web-site in December. Just add .erb suffix extension and you can use ruby in your asset like this:

// file: _assets/stylesheets/app.css.sass.erb

body
  background-color: <%= (12 == Date.today.month) ? "red" : "white" %>

Want more? Sure, here you are. You can use JavaScript templating with EJS or ECO for example. Create a file _assets/javascripts/hello.jst.ejs with following contents:

<p>Hello, <span><%= name %></span>!</p>
<p><%= info %></p>

Then use it in your app.js file like this:

#= require vendor/jquery
#= require hello

$ ->
  $("body").html JST["hello"]
    name: "ixti"
    info: "I love BIG BOOKS! And small ones too!"

Finally, you might want to store your assets on Amazon S3 or any CDN service you like. As said previously, all compiled/processed assets got special MD5 checksum appended to their original filenames. So, for example, your app.js.coffee will become something like:

app-4f41243847da693a4f356c0486114bc6.js

By default, generated URLs will have /assets/ prefixes, but you will want to change this if you are going to host assets somewhere else. This can be easily changed via configuration:

assets:
  baseurl: http://my.super-cool-cdn.com/assets

Images size (dimension) auto-guessing

The image helper accepts options param (in square brackets) with autosize switch. If given, then image dimension will be calculated and apropriate attributes set:

{% image logo.png alt="Logo" [autosize] %}

<!-- assuming logo.png is 50x50, the above will render -->

<img src="/assets/logo-68b329da9893e34099c7d8ad5cb9c940.png" alt="Logo"
     width="50" height="50">

You can also globally enable autosize in config (see autosize config option below). In this case, image tag will alway render dimension attributes unless you specify no-autosize switch. Assume you have autosize option enabled in config, then:

{% image logo.png [no-autosize] %}
{% image logo.png %}

<!-- assuming logo.png is 50x50, the above will render -->

<img src="/assets/logo-68b329da9893e34099c7d8ad5cb9c940.png">
<img src="/assets/logo-68b329da9893e34099c7d8ad5cb9c940.png"
     width="50" height="50">

Images resizing

The image helper accepts an option param with [resize:dimension] switch. If given the image will be resized to the appropriate dimensions.

{% image huge-logo.png [resize:50x50] %}

<!-- which will render something like: -->
<img src="/assets/logo-50x50-68b329da9893e34099c7d8ad5cb9c940.png">

You can also mix auto resizing with dimension guessing

{% image huge-logo.png [resize:50x50, autosize] %}

<!-- Will be rendered like: -->
<img src="/assets/logo-50x50-68b329da9893e34099c7d8ad5cb9c940.png" width="50" height="50">

This feature requires imagemagick to be installed, and the dimension is any format that imagemagick understands: Resize documentation.

More examples:

{% image image.png [resize:400x400] %}  <!-- Fit whole image in these dimensions -->
{% image image.png [resize:!300x150] %} <!-- Ignore aspect ratio -->
{% image image.png [resize:200%] %}     <!-- Resize by percentage -->
{% image image.png [resize:500@] %}     <!-- Resize to specific pixel count -->
{% image image.png [resize:200x100^] %} <!-- Resize to fill area -->
{% image image.png [resize:<200x10] %}  <!-- Only enlarge small image -->
{% image image.png [resize:>200x10] %}  <!-- Only shrink large image -->

Custom Compressors

Sprockets comes with good set of preconfigured compressors, but imagine you are not satisfied with default settings. For example you want to strip all comments but copyrights info. In this case you can define and use your own compressor.

To do so, first let's define new compressor in _plugins/ext.rb:

require "jekyll-assets"
require "sprockets"

Sprockets.register_compressor 'application/javascript',
  :my_uglifier, Uglifier.new(:comments => :copyright)

Once it's done, just tell assets to use my_uglifier as js compressor:

assets:
  js_compressor: my_uglifier

Compilation Cache

To improve build time, you can enabled compiled assets cache:

assets:
  cache: true

This will keep cache of compiled assets in .jekyll-assets-cache under source of your jekyl site. If you want to use different location specify it instead of true, in this case it should be an absolute path or path relative to source path of your jekyl site.

Custom Vendors

Sometimes you would like to have some 3rd-party vendors. For this purposes, normally all you have to do is to override default assets sources in config:

assets:
  sources:
    - _assets/images
    - _assets/javascripts
    - _assets/stylesheets
    - _vendors/bootstrap/stylesheets
    - _vendors/bootstrap/javascripts

But sometimes this is not enough. For example, with compass. As jekyll-assets uses Sprockets internally, you can simply append "global" paths into it. Just add following line into your _plugins/ext.rb file:

require "sprockets"

Sprockets.append_path "/my/vendor"

That's it, now jekyll-assets will try to look for assets inside /my/vendor path first.

The Directive Processor

Note: This section extracted from Sprockets README.

Sprockets runs the directive processor on each CSS and JavaScript source file. The directive processor scans for comment lines beginning with = in comment blocks at the top of the file.

//= require jquery
//= require jquery-ui
//= require backbone
//= require_tree .

The first word immediately following = specifies the directive name. Any words following the directive name are treated as arguments. Arguments may be placed in single or double quotes if they contain spaces, similar to commands in the Unix shell.

Note: Non-directive comment lines will be preserved in the final asset, but directive comments are stripped after processing. Sprockets will not look for directives in comment blocks that occur after the first line of code.

Supported Comment Types

The directive processor understands comment blocks in three formats:

/* Multi-line comment blocks (CSS, SCSS, JavaScript)
 *= require foo
 */

// Single-line comment blocks (SCSS, JavaScript)
//= require foo

# Single-line comment blocks (CoffeeScript)
#= require foo

Sprockets Directives

You can use the following directives to declare dependencies in asset source files.

For directives that take a path argument, you may specify either a logical path or a relative path. Relative paths begin with ./ and reference files relative to the location of the current file.

The `require` Directive

require path inserts the contents of the asset source file specified by path. If the file is required multiple times, it will appear in the bundle only once.

The `include` Directive

include path works like require, but inserts the contents of the specified source file even if it has already been included or required.

The `require_directory` Directive

require_directory path requires all source files of the same format in the directory specified by path. Files are required in alphabetical order.

The `require_tree` Directive

require_tree path works like require_directory, but operates recursively to require all files in all subdirectories of the directory specified by path.

The `require_self` Directive

require_self tells Sprockets to insert the body of the current source file before any subsequent require or include directives.

The `depend_on` Directive

depend_on path declares a dependency on the given path without including it in the bundle. This is useful when you need to expire an asset's cache in response to a change in another file.

The `stub` Directive

stub path allows dependency to be excluded from the asset bundle. The path must be a valid asset and may or may not already be part of the bundle. Once stubbed, it is blacklisted and can't be brought back by any other require.

Configuration

You can fine-tune configuration by editing your _config.yml:

#
# Plugin: jekyll-assets
#
assets:
  #
  # Pathname of the destination of generated (bundled) assets relative
  # to the destination of the root.
  #
  dirname: assets
  #
  # Base URL of assets paths.
  #
  baseurl: /assets/
  #
  # Pathnames where to find assets relative to the root of the site.
  #
  sources:
    - _assets/javascripts
    - _assets/stylesheets
    - _assets/images
  #
  # Sets JS compressor. No compression by default.
  # Possible variants: 'yui', 'uglifier', nil
  #
  js_compressor: ~
  #
  # Sets CSS compressor. No compression by default.
  # Possible variants: 'yui', 'sass', nil
  #
  css_compressor: ~
  #
  # Globally enables adding image width and height attributes to image tags.
  # Does nothing if either width or height attribute already set.
  # Disabled by default.
  #
  autosize: false
  #
  # Sets cachebusting policy for generated assets.
  #
  # Possible variants:
  #
  #   none - disables cachebusting
  #
  #     source file:  _assets/javascripts/app.css
  #     output file:  _site/assets/javascriptis/app.css
  #     output URL:   /assets/javascripts/app.css
  #
  #   soft - leave filenames as-is, but `?cb=<md5>` suffix for URLs generated
  #          with `asset_path`, `javascript` and `stylesheet`:
  #
  #     source file:  _assets/javascripts/app.css
  #     output file:  _site/assets/javascriptis/app.css
  #     output URL:   /assets/javascripts/app.css?cb=4f41243847da693a4f356c0486114bc6
  #
  #   hard - (default) injects cachebusting checksum into processed filename:
  #
  #     source file:  _assets/javascripts/app.css
  #     output file:  _site/assets/javascriptis/app-4f41243847da693a4f356c0486114bc6.css
  #     output URL:   /assets/javascripts/app-4f41243847da693a4f356c0486114bc6.css
  #
  cachebust: hard
  #
  # Whenever or not cache compiled assets (disabled by default).
  # See `Compilation Cache` section of README for details.
  #
  cache: false
  #
  # Specifies list of MIME types that needs to have gzipped versions.
  # You can set it to `false` to disable gzipping. Only javascripts and
  # stylesheets are gzipped by default.
  #
  gzip: [ text/css, application/javascript ]
  #
  # Does not concatenates files requested by `javascript` and `stylesheet`
  # helpers. Instead outputs multiple files in order they are required.
  # Default: false
  #
  debug: false
  #
  # Configuration version. Used to force cache invalidation.
  # Default: 1
  #
  version: 1

"Th-th-th-that's all folks!"

Feel free to follow me on twitter, chat via jabber or write an e-mail. :D

Contributing

Fork jekyll-assets on GitHub
Make your changes
Ensure all tests pass (bundle exec rake)
Send a pull request
If we like them we'll merge them
If we've accepted a patch, feel free to ask for commit access!

License

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Name		Name	Last commit message	Last commit date
Latest commit History 316 Commits
gemfiles		gemfiles
lib		lib
spec		spec
.gitignore		.gitignore
.rspec		.rspec
.rubocop.yml		.rubocop.yml
.rubocop_todo.yml		.rubocop_todo.yml
.travis.yml		.travis.yml
.yardopts		.yardopts
Appraisals		Appraisals
Gemfile		Gemfile
Guardfile		Guardfile
HISTORY.md		HISTORY.md
LICENSE		LICENSE
README.md		README.md
Rakefile		Rakefile
jekyll-assets.gemspec		jekyll-assets.gemspec

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Jekyll::Assets

Installation

How to Use Jekyll-Assets

Images size (dimension) auto-guessing

Images resizing

Custom Compressors

Compilation Cache

Custom Vendors

The Directive Processor

Supported Comment Types

Sprockets Directives

The `require` Directive

The `include` Directive

The `require_directory` Directive

The `require_tree` Directive

The `require_self` Directive

The `depend_on` Directive

The `stub` Directive

Configuration

"Th-th-th-that's all folks!"

Contributing

License

About

Releases

Packages

Languages

License

velocity-labs/jekyll-assets

Folders and files

Latest commit

History

Repository files navigation

Jekyll::Assets

Installation

How to Use Jekyll-Assets

Images size (dimension) auto-guessing

Images resizing

Custom Compressors

Compilation Cache

Custom Vendors

The Directive Processor

Supported Comment Types

Sprockets Directives

The require Directive

The include Directive

The require_directory Directive

The require_tree Directive

The require_self Directive

The depend_on Directive

The stub Directive

Configuration

"Th-th-th-that's all folks!"

Contributing

License

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

The `require` Directive

The `include` Directive

The `require_directory` Directive

The `require_tree` Directive

The `require_self` Directive

The `depend_on` Directive

The `stub` Directive

Packages