in Basset, Our Authors

How to publish collection files with Basset?

This article explains how to publish collection files to builds with Basset – better asset management for Laravel. You will need to know how to use Basset first in order to understand the guide below.

Sometimes you will need to copy files from collection folders to public/builds so that they can be used from public folders.

One of the best examples of this is CKEditor, because CKEditor uses lazy loading for its plugins. It just needs to have it’s load path setup and it lazy loads everything it needs.

But with any build system this becomes an issue because the production files (minified and concatinated) not only do they have different names, but they also most of time have a different folder locations from which they are served.

And this is an issue with CKEditor, because when we pull it with Bower it expects its files to be at the bower_components/ckeditor directory but when we combine it with a build system, build files can’t figure out the right location for the lazy loading.

That all ends up with a mess of loading different configuration files for developing and production. which just increases complexity to unnecessary levels.

Basset can help with this with the Copy config option. With Copy you can easily setup which files you want to end up where you want, and in that way the locations are consistent and easy to understand.

Here’s an example collection.json (uses Hjson) configuration:

{
  collections: {
    blog: {
      bower: bower.json

      js: [
         ckeditor-before.js
         bower_components/ckeditor/ckeditor.js
         blog.js
      ]
    }
  }
}

This, of course means that you have the following collection folder structure:

resources/assets/
└─────────────── blog/
                ├─── bower_components/
                ├─── bower.json
                ├─── blog.js
                └─── ckeditor-before.js

And in bower.json file in resources/assets/blog, you can see:

{
  "name": "blog",
  "dependencies": {
    "ckeditor": "~4.4.2",
  },
  "overrides": {
    "ckeditor": {
      "main": []
    }
  }
}

Now we only need to tell ckeditor from where it will load its files. In ckeditor-before.js, write:

this.CKEDITOR_BASEPATH = '/builds/blog/ckeditor/';

And now we will tell Basset how to copy the needed files, go into collection.json and add the Copy config option:

{
  collections: {
    blog: {
      bower: bower.json

      copy: {
        "bower_components/ckeditor": "ckeditor"
      }

      js: [
         ckeditor-before.js
         bower_components/ckeditor/ckeditor.js
         blog.js
      ]
    }
  }
}

You see, the keys are globs of folders or files, and the values are the destination folders. So you can expect that the bower_components/ckeditor will be copied to the ckeditor folder of the blog collection builds.

So when you run build the copied files will be at /builds/blog/ckeditor location. Run build with:

gulp build

Awesome!

This example shows how to use it for CKEditor, but you can use this Copy option for images, or anything you need to have available at the collection folders, but you want to have published and available from the public.

Share this ...Tweet about this on TwitterShare on FacebookEmail this to someoneShare on RedditShare on Google+Share on LinkedInPin on Pinterest