99designs/silex-assets

Asset pipeline using make

Silex Assets

Silex Assets aims to be the most minimal possible asset pipeline for using sass/requirejs in a Silex project., _(*1)

Rather than depend on Gulp/Grunt, a Makefile is provided, or a set of Makefile includes to include in your project., _(*2)

How does it work?

All asset compilation is done via the command-line. This means your app is ultra-lean, even in development. All assets are based around a dist directory, which is located in your web tree. A Makefile is used to generate a dist/.manifest file which contains what files have been generated and checksums for their contents., _(*3)

The twig extension included then allows twig templates to reference files in dist, along with the checksum from the manifest as a cache-buster., _(*4)

This looks like <link rel="stylesheet" src="/web/dist/mystylesheet.css?12312334234" /> where the number is a CRC32 checksum built in the make manifest target., _(*5)

During development you can run make watch and changing sass will be re-compiled, a new manifest will be built and if you have the LiveReload plugin your browser will update., _(*6)

Installing

composer require 99designs/silex-assets

Then add the provider to your app.php file:, _(*7)

<?php

$app->register(new \SilexAssets\Provider\AssetsServiceProvider(array(
    'web_path' => '/dist',
    'output_dir' => __DIR__.'/../web/dist',
    'requirejs_compiled' => $app['assets.require_compiled'],
    'requirejs_output_dir' => __DIR__.'/../web/dist/js',
    'requirejs_web_path' => '/dist/js',
)));

Then there are twig extensions added that use a very similar syntax to the Assetic extensions:, _(*8)

{% stylesheets 'css/swiftly.css' 'css/asimovicons.css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

{% javascripts "js/example.js" %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

{% assets "js/example.js" %}
    <script src="{{ asset_url }}"></script>
{% endassets %}

{% requirejs 'bundles/frontpage' %}