machy8/webloader

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

v1.0.2 2017-11-02 17:33 UTC

README

Build Status Coverage Status Packagist

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

In a nutshell

Requirements

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

Installation

 composer require machy8/webloader

Examples:

Typical:

$webloader = \WebLoader\Engine;
$webloader->addJsFilter('minifier', function(string $code) {
        // Minify
        return $code;
    })
    ->addPathsPlaceholders([
        'jsDir' => 'path/to/js/dir'
    ]);
    
$webloader->createJsCollection('homepage')
    ->setFiles([
        '%jsDir%/script.js'
    ])
    ->setFilters([
        'minifier'
    ]);
    
echo $webloader->getFilesCollectionRender()->js('homepage', ['async' => TRUE]);

Nette framework:

Configuration file

extensions:
    webloader: WebLoader\Bridges\Nette\WebLoaderExtension
    
webloader:
    outputDir: path/to/webtemp
    filesCollections:
        critical:
            cssFiles:
                - path/to/file.css
            cssLoadContent: TRUE

        homepage:
            cssFiles:
                - path/to/file.css
            cssFilters:
                - urlFilter

            jsFiles:
                - path/to/file.js

    filesCollectionsContainers:
        homepage:
            cssCollections:
                - critical
                - homepage

            jsCollections:
                - homepage

Presenter

/**
 * @var Engine
 */
private $webLoader;


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


public function beforeRender()
{
    $this->webLoader
        ->addCssFilter('urlFilter', function(string $code, string $file) {
            $filter = \WebLoader\Filters\CssUrlFilter('path/to/webtemp');
            return $filter->filter($code, $file);
        }, TRUE)
        
        ->addJsFilter('minify', function(string $code) {
            $closureCompiler = new \GoogleClosureCompiler\Compiler;
            $response = $closureCompiler->setJsCode($code)->compile();

            if ($response && $response->isWithoutErrors()) {
                 return $response->getCompiledCode();
            }

            return $code;
        });
       
    $this->template->setParameters([
        'webloaderContainersRender' => $this->webLoader->getFilesCollectionsContainerRender()->selectContainer('homepage')
    ]);
}
{$webloaderContainersRender->css()|noescape}
{$webloaderContainersRender->js()|noescape}

Output examples:

<!-- $render->css('style') -->
<link type="text/css" rel="stylesheet" href="style.css?v=1508834107">

<!-- $render->css('style', [], TRUE) -->
<style type="text/css">
 /* Code */
</style>

<!-- $render->cssPreload('style') -->
<link rel="preload" href="style.css?v=1508834107" as="style">

<!-- $render->cssPrefetch('style') -->
<link rel="prefetch" href="style.css?v=1508834107">


<!-- $render->js('script') -->
<script type="text/javascript" src="script.js?v=1508834107"></script>

<!-- $render->js('script', [], TRUE) -->
<script type="text/javascript"> 
 // Code
</script>

<!-- $render->jsPreload('script') -->
<link rel="preload" href="script.css?v=1508834107" as="script">

<!-- $render->jsPrefetch('script') -->
<link rel="prefetch" href="script.css?v=1508834107">