in Basset, Laravel, Our Authors

Basset – asset collections for Laravel

Introducing Laravel Basset (which stands for Better Asset Management) is a Gulp asset building system with integration for Laravel PHP framework.

Laravel Basset is inspired by Basset package for Laravel by Jason Lewis.

It comes with Browserify, ES6, SCSS, LESS, CoffeeScript, Autoprefixer, Livereload and Bower support included.

It uses very simple  collections configuration for assets. Collections are sets of JavaScript and stylesheet files that should be combined into one unit. Your website can use many collections like, for example, homepage collection, login collection, admin collection and whatever you need.

Quick start

To quickly start your project via Composer with Laravel and Basset setup, run:

composer create-project thelegacy/laravel your-project-name dev-master

After this just run npm install and your done. You can go ahead and build your application.

Or the longer way ….


Add gulp and laravel-basset npm package, using command:

npm install gulp laravel-basset --save

This will add gulp and laravel-basset package to your project.

In order to use this with Laravel you should install Laravel integration package with Composer, just run it from Terminal:

composer require thelegacy/basset

This will add PHP package for integration with Laravel. To complete installation with Laravel, go into your config/app.php and add this class to Service Providers:


Now, you’re done and you should have everything installed for NodeJS and Laravel.


Create Gulpfile.js or edit Gulpfile that comes with Laravel 5.

Now you should add loading of collections configuration. You can put collections inline into Gulpfile.js or you can separate collections into collections.json file. Scanning of collections.json file can be added easily, inside Gulp file add this:

var basset = require('laravel-basset');


Now just create a collections.json file and define collections in the collections.json file, for example like this:

    "collections": {
        "main": {
            "css": [
            "js": [
        "admin": {
            "css": [

Here you can see two collections defined, the main collection and the admin collection. Also you can see that JavaScripts are put under js key and stylesheets are put under css key under each collection definition. You can also see that you can put external css or js files as well.


To build these collections you just run:

gulp build

And it will build these files into public/builds directory by default. In there you can also see manifest.json file which is used by view helpers to identify which build files are used.

Usage in views

To use these built collections you can use @stylesheets and @javascripts helpers in Blade views, like this:

<!doctype html>
  <meta charset="utf-8">



Or  use <?php echo basset_javascripts(‘main’) ?> or <?php echo basset_stylesheets(‘main’) ?> in simple PHP view.

This will output script or link tags for javascripts or stylesheets.

You can now see all the files that you included in your collection definition in your browser.

Watch mode

There is also a watch mode included so that whenever you change files build command is run. Watch watches files referenced in your collection definition.

To use Watch Mode, start:

gulp basset:watch

You can run this watch with Laravel Elixir watch, like this:

gulp watch basset:watch

This will start Watch Mode and you can modify files end see them when you reload your browser.

Livereload middleware

Watch Mode uses livereload by default, and to use livereload in your Laravel project you should add our Basset\Livereload middleware. Go into your app/Http/Kernel.php file and add:


To protected $middleware array. This will add Livereload snippet to every html response, but only on local environment.

Now whenever you change watched files, build is being run and your browser will automatically reload.

Build for production

To build collections for production environment run:

gulp production build

This will build collections for production environment and combine and minify all collection files.

This will result with a single css and single js file for every collection. So for the main collection you will get main-{SHA1}.css and a main-{SHA1}.js file with SHA1 hash of contents added to the name of files.

Basset is also Dotenv aware, so if you have APP_ENV=production in your .env file, then Basset will know that it needs to build for production.

Bower support

Basset has Bower support built-in, it can read your bower.json file and wire all your dependencies in. To add bower components you should go into folder of your collection, and install bower component.

In this example, collection name will be admin. You should add to your collections.json :

    "collections": {
        "admin": {
            "bower": "bower.json",
            "css": [

You can see that we added where the bower.json file is located, and for admin collection it will be at admin/bower.json location, and bower_components will be at admin/bower_components location.

Now when you add jQuery, or Bootstrap or any Bower component, main files of those components will be added to your collection. So you will never need to worry about including dependencies.

So for jQuery case, bower_component/jquery/dist/jquery.js will automatically be included.


To enable Browserify support you need to set “browserify” : true in your collection definition. So for admin its going to look like:

    "collections": {
        "admin": {
            "browserify": true,
            "bower": "bower.json",
            "css": [

This will run browserify for this collection and by default it will look for index.js or main.js or admin.js as the main file for browserify. You can, of course, add your own.

And Watch Mode automatically runs Watchify already setup, so your Browserify builds will run much faster.


ECMA Script 6 is enabled when your turn on Browserify. It uses Babel (formerly 6to5) transpiler. So go ahead and use Classes, modules, and all the other es6 goodness.


Flowcheck, runtime type checking is included when you use Browserify, so you can use optional types. Also it is only included in development mode.


For users of AngularJS, by default, ng-annotate is run for production build, so all your dependency injection is properly minified.

Load path

Assets inside colllections by default can be put inside these three directories:


So when you refer to files inside collections these are the directories where Basset is going to look for files.

Also every collection name can have sub folder load path. So for admin collection load path will be:


Incremental builds

Build is run only on files that changed content, so you don’t have to wait for long builds. Whenever you change a single file, in most cases only that single file will be rebuilt.


Basset uses Hjson for loading collection.json file, so you can use a more Human JSON like:

  collections: {
    blog: {
      browserify: true

      css: [

Without being annoyed by JSON syntax errors.

Source Code

Laravel Basset has two parts, NodeJS one and PHP one. So:

NodeJS laravel-basset:

PHP Basset:

Express integration is coming soon. More PHP Frameworks integrations coming soon.


Basset has Browserify, ES6, SCSS, LESS, CoffeeScript. It has separate Bower components dependecies for each collection.

It has Autoprefixer, Livereload, ng-annotate, UglifyJS, and Incremental builds for building and developing.

This is it! This is what we consider the best asset management for your Laravel project.

Follow up

How to use Font Awesome with Basset?

How to pass data to JavaScript with Basset?

Basset – auto .min swapping