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:
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
'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' ] |
Now you’ll be able to sit back and let the pipeline do its thang as you include your assets via twig:
1 |
{{ addAssets() }} |
You can pimp this extension to include different manifests for different sections of a site (e.g. frontend/backend) but hopefully you get the point.
Anyway, thanks CodeSleeves and Happy Coding!