Laravel Asset Pipeline with Twig

Ask any PHP dev about their asset pipeline and you’ll get all sorts of responses: Gulp. Grunt, Rails Gems, Assetic, no pipeline (naughty! 👿 ), or any mix of custom code that’s about as susceptible to code rot as a newborn zombie.

Considering Laravel is essentially a layer of modernised sugar on top of Symfony components and other bits and bobs, it’s quite baffling that the framework doesn’t feature an asset build pipeline out-of-the-box.

CodeSleeve’s asset-pipeline package, in my opinion, nails it. Simply put: there are configuration files that point to asset directories and there are include functions for your views. You don’t have to juggle different pre-compilation phases, the pipeline handles the lot: js, css, coffee, less, scsss, html, fonts and images.

Caching is clever too: only files that have been changed force a compilation, so even local development trots along with the latest build.

To include compiled stylesheets and javascript files in a view you can use:

<?= stylesheet_link_tag() ?>
<?= javascript_include_tag() ?>

1 2	<?= stylesheet_link_tag() ?> <?= javascript_include_tag() ?>

Let’s create a Twig extension inside the directory “YourNamespace/Twig/Extension” to wrap these calls in a simple function that we can invoke from any template.

namespace YourNamespace\Twig\Extension;

use Twig_Extension;
use Twig_SimpleFunction;

class AssetPipelineExtension extends Twig_Extension
{
    function getName()
    {
        return 'YourNamespace_Twig_Extension_AssetPipeline';
    }
 
    function getFunctions()
    {
        return [
             new Twig_SimpleFunction('addAssets', [$this, 'addAssets'])
        ];
    }
 
    public function addAssets()
    {
        stylesheet_link_tag();
        javascript_include_tag();
    }
}

namespace YourNamespace\Twig\Extension;

use Twig_Extension;

use Twig_SimpleFunction;

class AssetPipelineExtension extends Twig_Extension

{

function getName()

{

return 'YourNamespace_Twig_Extension_AssetPipeline';

}

function getFunctions()

{

return [

new Twig_SimpleFunction('addAssets', [$this, 'addAssets'])

];

}

public function addAssets()

{

stylesheet_link_tag();

javascript_include_tag();

}

Now we’ve built the extension, we need to give Twig the nod to include it.

Assuming you’ve installed TwigBridge, first run the artisan command:

php artisan config:publish rcrowe/twigbridge

Obviously you don’t have to run this if you have already done so for previous extension work.

Now we’ve got a “packages/rcrowe/twigbridge” folder in the config to override, edit the extensions.php file to include our new AssetPipelineExtension.

 'enabled' => [
 'TwigBridge\Extension\Loader\Facades',
 'TwigBridge\Extension\Loader\Filters',
 'TwigBridge\Extension\Loader\Functions',
 'TwigBridge\Extension\Laravel\Auth',
 'TwigBridge\Extension\Laravel\Config',
 'TwigBridge\Extension\Laravel\Form',
 'TwigBridge\Extension\Laravel\Html',
 'TwigBridge\Extension\Laravel\Input',
 'TwigBridge\Extension\Laravel\Session',
 'TwigBridge\Extension\Laravel\String',
 'TwigBridge\Extension\Laravel\Translator',
 'TwigBridge\Extension\Laravel\Url',
 'YourNamespace\Twig\Extension\AssetPipelineExtension'
 ]