Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Machy8/webloader
📦 Simple, easy to use, php bundler for javascript and css.
https://github.com/Machy8/webloader
build-tool css frontend javascript module-bundler webloader
Last synced: about 2 months ago
JSON representation
📦 Simple, easy to use, php bundler for javascript and css.
- Host: GitHub
- URL: https://github.com/Machy8/webloader
- Owner: Machy8
- License: bsd-3-clause
- Created: 2017-10-03T18:06:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-12-26T18:40:25.000Z (over 2 years ago)
- Last Synced: 2024-07-07T12:07:09.618Z (2 months ago)
- Topics: build-tool, css, frontend, javascript, module-bundler, webloader
- Language: PHP
- Homepage:
- Size: 302 KB
- Stars: 19
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
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](https://github.com/Machy8/webloader/blob/master/docs/Files%20collections.md)** and **[containers](https://github.com/Machy8/webloader/blob/master/docs/Files%20collections%20containers.md)**: makes assets organizing incredibly simple
- **[Filters](https://github.com/Machy8/webloader/blob/master/docs/Filters.md)**: callable in two different ways
- **[Path placeholders](https://github.com/Machy8/webloader/blob/master/docs/Placeholders.md)**: 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](https://github.com/Machy8/webloader/blob/master/docs/Tracy%20bridge.md)** for [Tracy](https://tracy.nette.org/cs/)
## Requirements
- PHP 8.0+
- If you use Nette Framework - v2.4+
## Installation
```
composer require machy8/webloader
```
## Docs
- [Files collections](https://github.com/Machy8/webloader/blob/master/docs/Files%20collections.md)
- [Files collections containers](https://github.com/Machy8/webloader/blob/master/docs/Files%20collections%20containers.md)
- [Filters](https://github.com/Machy8/webloader/blob/master/docs/Filters.md)
- [Placeholders](https://github.com/Machy8/webloader/blob/master/docs/Placeholders.md)
- [Tracy bridge](https://github.com/Machy8/webloader/blob/master/docs/Tracy%20bridge.md)
## 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.
````yaml
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**.
````PHP
$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.
````PHP
echo $webloader->getFilesCollectionRender()->css('my-bundle');
````
The PHP file after the last edit will looks like this:
````PHP
$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:
````html
````
## Quick start (for Nette Framework)
For the Nette Framework it is very similar. First of all, register Web Loader extension.
````yaml
extensions:
webloader: WebLoader\Bridges\Nette\WebLoaderExtension
````
Next step is to add Web Loader section with my-bundle collection configuration inside.
````yaml
webloader:
filesCollections:
my-bundle:
cssFiles:
- path/to/style-a.css
- path/to/style-b.css
````
In your presenter, inject the engine...
````PHP
/**
* @var Engine
*/
private $webLoader;
public function __construct(\WebLoader\Engine $engine)
{
$this->webLoader = $engine;
}
````
and set template parameters (for example in the **beforeRender** method).
````PHP
public function beforeRender()
{
$this->template->webloaderFilesCollectionRender = $this->webLoader->getFilesCollectionRender();
}
````
The last step is to call the render in a latte template.
````LATTE
{$webloaderFilesCollectionRender->css('my-bundle')|noescape}
````