Generally assets are stored in your public directory, right? They are public, so anyone can get access to them. But nowadays the performance is a very important factor when deploying a new app. I strongly recommend you to minify and cache your assets, like CSS files, Javascript files and Images.

If you are using 11 javascript files in your app you don't have to make 11 requests on the server, one per JS files. You can easily join all files and minify them, so you will have just one minified file. This is easy to do using Laravel 4! I've found four Laravel 4 assets managers:

We will work with codesleeve/asset-pipeline package. It's easy to use and simple to understand.

Installation

Let's suppose you already have a Laravel 4 working. First, using Composer, you have to install the package. So, open your composer.json and add the package information to install it:

{ 
    ... 
    "require": { 
        "laravel/framework": "4.0.*", 
        "codesleeve/asset-pipeline": "dev-master" 
    }, 
    ... 
}

Now on the terminal update your composer. composer update Now you have to tell Laravel you are using this asset management package. So, open your app/config/app.php and add this line inside the providers block:

'Codesleeve\AssetPipeline\AssetPipelineServiceProvider',

Creating the assets directory

Now, on the terminal type a artisan command (from the package we've installed):

php artisan assets:setup

This will create the app/assets folder. Inside it you will find 2 new directories: javascripts and stylesheets. Inside each one you will find a file called "application" (application.css and application.js). These are our manifest files. You will understand what a "manifest" file is later. So we have the follow structure:

  • /app
    • assets
      • javascripts
        • application.js
      • stylesheets
        • application.css

The package "logic"

In a easy way what the package does is to get the assets files content, join them, minify them and save the result. So, the package will get your "assets file list", get the content one by one, concatenate them and run a CSS minify or JS minify algorithm, provided by some PHP class.

The base assets route

By default the package will use the route http://example.org/assets/application.(js|css). You can find it in the routes list:

php artisan routes

You can find a GET /assets/{path} route. You can change that for what you want. Let's suppose you want /static/application.js for example. You only have to change the package config file. First you have to install this config file, so run the follow artisan command:

php artisan config:publish codesleeve/asset-pipeline

This will create the app/config/packages/codesleeve/asset-pipeline/config.php. You can change the route you want and other options inside this config file.

Testing

Now, go to http://yoursite.org/assets/application.js and see the result. ATTENTION: if you got a 404 error you are doing something wrong, check:

  1. You have a assets directory inside your public dir. If you have one, please, change its name to, for example, assets2, just for now.

  2. You are using the PHP 5.4+ built-in server the wrong way. I had a BIG problem with this. You cannot start the PHP server (with Laravel 4) this way

    php -S localhost:8000 -t public.

You MUST use the server.php file that Laravel 4 provides you, so you must start the PHP server this way: php -S localhost:8000 server.php. Now you can see the http://yoursite.org/assets/application.js file, but with the default content.

Inserting the files inside your HTML

Now you have everything working you have to include this tags inside your HTML. So insert the above inside your template or view file:

Copying your assets file you already are using

You can copy the css and js files you are using to the respective directories inside app/assets folder. Copy them, and open your website and check the code. You will se all the JS and the CSS files. If you are using your environment as "production" you will see all files concatenated in only one. The package show all files for "testing" or "development" environments and just one for the "production" one.

Setting the file ordering

We've talking about the MANIFEST file, right? Manifest file is the file that will control the order to load each asset file (JS or CSS). Open the app/assets/javascripts/application.js. You will see something like this:

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it 
// gets included (e.g. say you have require_tree . then the code will appear after all the directories 
// but before any files alphabetically greater than 'application.js' 
// 
// The available directives right now are require, require_directory, and require_tree 
//  
//= require_tree . The line where you have

= require_tree . is telling the asset manager to load all files inside the javascripts directory in alphabetic order. If you want to set a custom order you can write something like that:

//= require ./jquery 
//= require ./some-lib 
//= require ./another-lib

Now you will have all files you specified inside the MANIFEST file minified and being managed by the package. Now, you can do the same for CSS files. The package has more options like cache, etc. You can check the package's configuration file and found more details there. Be happy!