📦 Simple, easy to use, php bundler for javascript and css.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
tests Removed unnecessary readme file Mar 25, 2018
.gitattributes - Updated gitattributes Oct 24, 2017
.gitignore - Updated gitignore Mar 25, 2018
.travis.yml Updated cs Mar 25, 2018
Dockerfile - Changed dockerfile expose port from 82 to 80 Nov 2, 2017
README.md Update README.md Apr 12, 2018
composer.json Added symplify/easy-coding-standard Mar 25, 2018
docker-compose.yml Reverted Mar 25, 2018
license.md - Updated composer.json Oct 6, 2017
logo.png Added logo image Apr 5, 2018

README.md

Build Status Coverage Status Packagist

📦 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.1+
  • If you use Nette Framework - v2.3+

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}