Simple, easy to use, php bundler for javascript and css

v1.1.0 2017-12-18 19:39 UTC


Build Status Coverage Status Packagist

📦 Simple, easy to use, php bundler for javascript and css.

In a nutshell


  • PHP 7.0+
  • If you use Nette Framework - v2.3+


 composer require machy8/webloader

Quick start

Let's say we have two css files (styla-a.css and style-b.css) and we want to bundle them into one file which name will be my-bundle. This bundle will be stored in a webtemp dir (must be accessible from a browser).

The recommended way to configure Web Loader is through neon configuration files. The first step is to create a bundle.neon.

        - path/to/style-a.css
        - path/to/style-b.css

Next step is to init Web Loader, set the output dir path and tell him to create bundles from bundle.neon.

$webloader = new \WebLoader\Engine('path/to/webtemp');

The last step is to call files collections render to render css files collection named my-bundle.

echo $webloader->getFilesCollectionRender()->css('my-bundle');

The PHP file after the last edit will looks like this:

$webloader = new \WebLoader\Engine('path/to/output/dir');

echo $webloader->getFilesCollectionRender()->css('my-bundle');

The output will be similiar to the following code:

<link type="text/css" rel="stylesheet" href="/path/to/webtemp/my-bundle.css?v=1512829634">

Quick start (for Nette Framework)

For the Nette Framework it is very similar. First of all, register Web Loader extension.

    webloader: WebLoader\Bridges\Nette\WebLoaderExtension

Next step is to add Web Loader section with my-bundle collection configuration inside.

                - path/to/style-a.css
                - path/to/style-b.css

In your presenter, inject the engine...

 * @var Engine
private $webLoader;

public function __construct(\WebLoader\Engine $engine)
    $this->webLoader = $engine;

and set template parameters (for example in the beforeRender method).

public function beforeRender()
        'webloaderFilesCollectionRender' => $this->webLoader->getFilesCollectionRender()

The last step is to call the render in a latte template.