README

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

In a nutshell

Configurable: in one file (example bellow or in docs)
Files collections and containers: makes assets organizing incredibly simple
Filters: callable in two different ways
Path placeholders: reusable paths to files, less writing
Allows you to load remote and local files
If you have some critical css, you can load it directly into the page with minimal configuration required
Prepared for read only deployment - webloader is able to compile all files collections at once
Debugger bar for Tracy

Requirements

PHP 7.2+
If you use Nette Framework - v2.4+

Installation

 composer require machy8/webloader

Docs

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.

my-bundle:
    cssFiles:
        - 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');
$webloader->createFilesCollectionsFromConfig('path/to/bundle.neon');

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');
$webloader->createFilesCollectionsFromConfig('path/to/bundle.neon');

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.

extensions:
    webloader: WebLoader\Bridges\Nette\WebLoaderExtension

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

webloader:
    filesCollections:
        my-bundle:
            cssFiles:
                - 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()
{
    $this->template->setParameters([
        'webloaderFilesCollectionRender' => $this->webLoader->getFilesCollectionRender()
    ]);
}

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

{$webloaderFilesCollectionRender->css('my-bundle')|noescape}

jakercz / webloader

Maintainers

Details