machy8 / webloader
Simple, easy to use, php bundler for javascript and css
Installs: 28 561
Dependents: 3
Suggesters: 0
Security: 0
Stars: 19
Watchers: 4
Forks: 4
Open Issues: 3
Requires
- php: >=8.0
- nette/neon: ^2.4|^3.0
Requires (Dev)
- machy8/google-closure-compiler: ^1.0
- nette/di: ^3.0
- nette/tester: ^2.4
- phpstan/phpstan: ^1.2
- symplify/config-transformer: ^10.0
- symplify/easy-coding-standard: ^10.0
- tracy/tracy: ^2.8
- tubalmartin/cssmin: ^4.1
Suggests
- machy8/google-closure-compiler: PHP client for the Google Closure Compiler API in one file
- tedivm/jshrink: Javascript Minifier built in PHP
- tubalmartin/cssmin: A PHP port of the YUI CSS compressor
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 8.0+
- 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->webloaderFilesCollectionRender = $this->webLoader->getFilesCollectionRender(); }
The last step is to call the render in a latte template.
{$webloaderFilesCollectionRender->css('my-bundle')|noescape}