How to Elixir

How to Elixir

For an in-depth guide about Elixir itself please visit the Laravel Documentation.

Table of Contents

1. Build the Frontend
2. Asset Structure
   • Basics
   • Concat
   • Fonts and other stuff
   • Versioning

Build the Frontend

Building the Frontend is super easy. Elixir is built on top of gulp. Everything you have to do is:

1. Open a SSH connection with homestead ssh
2. Navigate to the project root
3. Run gulp

If you are actively developing the frontend you may choose gulp watch as it automatically triggers recompiles if you change an asset file.

You are ready to go!

Asset Structure

Basics

The asset structure is quite simple. We only use less assets to compile into stylesheets and plain javascript for all client side scripting. We have two major asset groups app and admin. An asset group is nothing more than a concatenation of multiple files of the same type (either stylesheets or scripts).

The normal app will only use the app.css and app.js files, but the admin panel will use both app.css/app.js and admin.css/admin.js.

Concat

For less we are using the native @import directive for concatenation. The Gulpfile.js specifies all include paths in the variable styles_include. They should point to the Resources/assets/less dir of every module which needs to provide less styles.

All @imports are stored in the two files resources/assets/less/app.less or resources/assets/less/admin.less corresponding to the asset groups.

Since javascript does not provide such import features, we require them all directly in the Gulpfile.js's include paths which are now split into scripts_include (app.js) and scripts_admin_include (admin.js).

Fonts and other stuff

Fonts (Bootstrap) and some javascript plugins (AdminLTE) are directly copied out of their dist folders into public/static/fonts and public/static/plugins.

Versioning

Elixir is able to version assets. You generally don't have to mess with that since it is already handled. So this is just for reference.

elixir(function(mix) {
    mix.version("css/all.css");
});

This will append a unique hash to the filename, allowing for cache-busting. For example, the generated file name will look something like: all-16d570a7.css.

Within your views, you may use the elixir() function to load the appropriately hashed asset. Behind the scenes, the elixir() function will determine the name of the hashed file that should be included.

Example: <link rel="stylesheet" href="{{ elixir("css/all.css") }}">