Awesome Open Source
Awesome Open Source

Use Laravel Elixir with Craft CMS

You can already use Laravel Elixir with Craft. It's rather straight forward. In fact, Matt Stauffer has an excellent write up on using Elixir on his company blog.

However, when using a CDN such as CloudFlare or Fastly. You might want to take advantage of file versioning to bust the cache. This plugin lets you use Elixir's built in versioning in your Craft templates!

Requirements

npm

Installation and Setup

If you haven't read the Elixir documentation on the Laravel website or the blog post above, Here is a quick overview on setting up Elixir.

create a package.json with the following content:

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.1"
  },
  "dependencies": {
    "laravel-elixir": "^5.0.0"
  }
}

run the npm install command:

npm install

add your SCSS, JavaScript and etc just like a Laravel project under resources/assets/sass and resources/assets/js.

create a gulpfile.js with your contents or copy this one:

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

elixir(function(mix) {
    mix.sass('app.scss')
        .version('css/app.css');
});

Run gulp watch!

When using the Elixir version function your CSS/JavaScript will output to public/css/all-16d570a7.css. This is where this plugin comes in!

Usage

With Laravel there is an Elixir PHP helper function that retrieves the correct version. Now you can do this in Craft templates!

Twig Function

{{ elixir('css/all.css') }}

Note: you can optionally output the entire HTML tag by passing a second argument true to the function (e.g {{ elixir('css/all.css', true) }}.

Twig Filter

{{ 'css/all.css' | elixir }}

<link rel="stylesheet" href="{{ craft.elixir.version('css/all.css') }}">

and

<script src="{{ craft.elixir.version('js/app.js') }}"></script>

If you are especially lazy, you can have the plugin automatically create the entire tag, based on the file extension.

{{ craft.elixir.withTag('js/app.js') | raw }}

This will output the <script> or <link> tags appropriately.

Credits

About Venveo

Venveo is a Digital Marketing Agency for Building Materials Companies in Blacksburg, VA. Learn more about us on our website.

License

The MIT License (MIT). Please see License File for more information.



Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,061,137
Php (286,134
Css (142,666
Plugin (113,829
Laravel (40,836
Elixir (16,657
Versioning (6,377
Twig (3,365
Craftcms (2,661
Craft Plugin (412
Laravel Elixir (16