PHPackages                             vesselinv/fuel-sprockets - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. vesselinv/fuel-sprockets

ActiveFuel-package

vesselinv/fuel-sprockets
========================

Asset management and asset bundling package for FuelPHP

v1.4.0(10y ago)166.2k7[1 PRs](https://github.com/vesselinv/fuel-sprockets/pulls)MITPHPPHP >=5.3.6

Since May 5Pushed 9y ago3 watchersCompare

[ Source](https://github.com/vesselinv/fuel-sprockets)[ Packagist](https://packagist.org/packages/vesselinv/fuel-sprockets)[ RSS](/packages/vesselinv-fuel-sprockets/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependencies (5)Versions (9)Used By (0)

Fuel Sprockets: Asset Bundling for FuelPHP
==========================================

[](#fuel-sprockets-asset-bundling-for-fuelphp)

Fuel Sprockets is an asset management and asset bundling package for FuelPHP. Following the idea behind the Asset Pipeline and the ease of use of the build-in Asset class, you can now manage your javascript and css files in your application with ease. Fuel Sprockets also comes with php ports of Sass/Compass, Less and CoffeeScript compilers.

This package is best installed via Composer, and is designed for use with FuelPHP version 1.6 and upwards.

Installation
============

[](#installation)

Installing Fuel Sprockets is as easy as:

1. Add

```
"vesselinv/fuel-sprockets": "1.*"

```

to the `require` list in your project's `composer.json`2. Install with `composer install`

Don't forget to add it to the Auto Loaded packages block in `config.php`

```
'packages'  => array(
  'sprockets',
),

```

Asset Structure
===============

[](#asset-structure)

Fuel Sprockets will automatically generate your bundle file into your `public/assets` directory.

To use Fuel Sprockets, you will need the following asset structure:

```
fuel/
|-- app/
|    |-- assets/
|    |    |-- js/
|    |    |-- css/
|    |    |-- img/
|    |-- cache/
|    |    |-- sprockets/
|    |    |    |-- js/
|    |    |    |-- css/
public/
|-- assets/
|    |-- js/
|    |-- css/
|    |-- img/

```

You should be placing your asset files inside `app/assets/*` and that's where Fuel Sprockets will expect to find them. This ensures separation of development files from production bundles. It also makes them publicly unaccessible.

The package will automatically create its cache folder. You will however need to create `app/assets/js/` and `app/assets/css/`

Convention over Configuration
=============================

[](#convention-over-configuration)

Fuel Sprockets, by default, is configured to use the afore-mentioned asset structure and make our lives a little bit easier. You can however, overwrite it by copying `config/sprockets.php` into your `fuel/app/config` directory

```

```

... or if you are using Twig for your views:

```
  {{ sprockets_js('application.js') }}
  {{ sprockets_css('application.scss') }}

```

The above will produce:

```

```

The Directive Parser
--------------------

[](#the-directive-parser)

Fuel Sprockets runs the *directive parser* on each CSS and JavaScript source file. The directive parser scans for comment lines beginning with `=` in comment blocks anywhere in the file. A sample `application.js`:

```
//= require jquery-1.9.1.js
//= require vendor/backbone.js
//= require_tree .
//= require_directory vendor/
(function($){
  $(document).ready(function(){
    alert('It effin works, dude!');
    });
  })(jQuery);

```

Directives expect relative file paths, which must include the file extension. File paths can also be wrapped in single `'` or double `"` quotes.

### Supported Comment Types

[](#supported-comment-types)

Fuel Sprockets understands comment blocks in three formats:

```
/* Multi-line comment blocks (CSS, SCSS, Less, JavaScript)
 *= require 'foo.js'
 */

// Single-line comment blocks (SCSS, Less, JavaScript)
//= require "foo.scss"

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

```

Fuel Sprockets Directives
-------------------------

[](#fuel-sprockets-directives)

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

### The `require` Directive

[](#the-require-directive)

`require` *path* inserts the contents of the asset source file specified by *path*. If anywhere in the scanned files *path* is duplicated, it will only be inserted once at the first `require` spot. Also supports remote files from CDNs.

### The `require_directory` Directive

[](#the-require_directory-directive)

`require_directory` *path* requires all source files of the same format - Js/Coffee or Css/Scss/Less - in the directory specified by *path*. Files are required in alphabetical order. Partials (filenames starting with an underscore `_`) and dotfiles `.` are ignored.

### The `require_tree` Directive

[](#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*. When using this directive, subfolders are included prior to any files that are direct children of *path* .

Supported Compilers
===================

[](#supported-compilers)

Fuel Sprockets comes with php ports of [Sass/Compass](https://github.com/leafo/scssphp-compass) (only the Scss syntax), [Less](https://github.com/leafo/lessphp) and [CoffeeScript](https://github.com/alxlit/coffeescript-php) compilers that will automatically compile your assets, without having to have these gems installed - in fact, no Ruby installation is needed either - all is handled through php.

*Note:* The package will expect to find CoffeeScripts inside your JS Asset Root (`fuel/app/assets/js/` by default) along with vanilla Js file, and Scss and Less stylesheeets inside your CSS Root Dir (`fuel/app/assets/css/` by default) along with vanilla Css. Some may say why mix up Js with Coffee and Css with Sass and Less and the answer simply is because in the end they all get compiled to plain Js and Css respectively. At a future point, if requested, I may add support for separating them into different folders.

`image-url()`
-------------

[](#image-url)

The `image-url()` function is available for the Less and Scss compilers, not for vanilla Css.

To make proper use of it, the referenced image must reside in `fuel/app/assets/img/` or a path that is equivalent to your customly defined `asset_root_dir` + `img_dir`. What the function will do is copy the image from `fuel/app/assets/img/` into `public/assets/img/`. Use as such:

```
// Only inside Less and Scss files:

body {
  background: image-url("my-fabulous-background.jpg");
}

// Will produce:

body {
  background: url("http://localhost:8000/assets/img/my-fabulous-background.jpg");
}

```

*Note:* The argument passed to `image-url()` must always be wrapped in single or double quotes.

Minification
============

[](#minification)

All Sprockets files will be automatically minified if your `Fuel::$env` is set to `production`. You can, however, force minification in different environments by setting `force_minify` to `true` in the Sprockets config file.

Smart Caching
=============

[](#smart-caching)

Fuel Sprockets is smart about caching. The final compiled source for each file that is included in your bundles in cached inside `fuel/app/cache/sprockets`. An md5 string of the file contents and minification flag (`.min`) are appended to the filename so that we can compare when your asset file has changed and whether the generated file is up-to-date.

Running Tests
=============

[](#running-tests)

I've prepared a Test Case with a set of files that will test all of the supported directives, compilers and minifier. To run the tests, simply use oil:

```
$ oil t

```

And watch the cache and compile folders inside tests/ get filled with bundles.

Precompiling your Bundles
=========================

[](#precompiling-your-bundles)

A Fuel Task is available through `oil` to precompile and minify your bundles.

```
$ oil r sprockets:compile application.js application.css

```

These tasks come in very handy when deploying with Capistrano. Simply define a task in your deploy.rb

```
namespace :deploy do
    desc "Precompile Assets"
    task :sprockets do
        run [ "cd #{latest_release}",
            "php oil refine sprockets:compile application.js application.css"
          ].join("; ")
    end
end

after "deploy:migrate", "deploy:sprockets"

```

Roadmap
=======

[](#roadmap)

The following improvements are on my list:

- Support for image processing when referenced in Scss, Less and Css assets.
- Support for fonts referenced in css assets - copy font files from `asset_root_dir` to `compile_dir`
- Additional Config options for the CoffeeScript, Scss/Compass and Less compilers
- Make package installable through Composer

License
=======

[](#license)

Copyright © 2013 Veselin Vasilev [@vesselinv](https://twitter.com/vesselinv)

Fuel Sprockets is distributed under an MIT-style license. See LICENSE for details.

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity28

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 80.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~129 days

Recently: every ~205 days

Total

8

Last Release

3846d ago

Major Versions

v0.1 → v1.02013-06-20

### Community

Maintainers

![](https://www.gravatar.com/avatar/5aaf505a8f0dc560d9dc5d6a7da87017a141d8e34f7fe1bc9b9251d13e2c0101?d=identicon)[vesselinv](/maintainers/vesselinv)

---

Top Contributors

[![vesselinv](https://avatars.githubusercontent.com/u/2160397?v=4)](https://github.com/vesselinv "vesselinv (37 commits)")[![crankeye](https://avatars.githubusercontent.com/u/588934?v=4)](https://github.com/crankeye "crankeye (5 commits)")[![andyjwwhite](https://avatars.githubusercontent.com/u/3267366?v=4)](https://github.com/andyjwwhite "andyjwwhite (4 commits)")

### Embed Badge

![Health badge](/badges/vesselinv-fuel-sprockets/health.svg)

```
[![Health](https://phpackages.com/badges/vesselinv-fuel-sprockets/health.svg)](https://phpackages.com/packages/vesselinv-fuel-sprockets)
```

###  Alternatives

[prestashop/prestashop

PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers.

9.0k15.4k](/packages/prestashop-prestashop)[elgg/elgg

Elgg is an award-winning social networking engine, delivering the building blocks that enable businesses, schools, universities and associations to create their own fully-featured social networks and applications.

1.7k15.7k4](/packages/elgg-elgg)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

44643.1k1](/packages/pressbooks-pressbooks)[johnbillion/user-switching

Instant switching between user accounts in WordPress and WooCommerce.

19768.3k2](/packages/johnbillion-user-switching)[rainlab/blog-plugin

Blog plugin for October CMS

17257.7k](/packages/rainlab-blog-plugin)[rainlab/user-plugin

User plugin for October CMS

11954.3k13](/packages/rainlab-user-plugin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)