Skip to content

Commit 7679a2c

Browse files
Machy8Machy8
committed
Merge remote-tracking branch 'origin/master'
2 parents 06270c6 + 4c90b63 commit 7679a2c

3 files changed

Lines changed: 126 additions & 111 deletions

File tree

‎README.md‎

Lines changed: 51 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -21,65 +21,60 @@
2121
composer require machy8/webloader
2222
```
2323

24-
## Examples:
25-
26-
**Typical:**
27-
```PHP
28-
$webloader = \WebLoader\Engine;
29-
$webloader->addJsFilter('minifier', function(string $code) {
30-
// Minify
31-
return $code;
32-
})
33-
->addPathsPlaceholders([
34-
'jsDir' => 'path/to/js/dir'
35-
]);
36-
37-
$webloader->createJsCollection('homepage')
38-
->setFiles([
39-
'%jsDir%/script.js'
40-
])
41-
->setFilters([
42-
'minifier'
43-
]);
44-
45-
echo $webloader->getFilesCollectionRender()->js('homepage', ['async' => TRUE]);
46-
```
24+
## Quick start
25+
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).
26+
27+
The recommended way to configure Web Loader is through neon configuration files. The first step is to create a bundle.neon.
28+
````yaml
29+
my-bundle:
30+
cssFiles:
31+
- path/to/style-a.css
32+
- path/to/style-b.css
33+
````
34+
35+
Next step is to init Web Loader, set the output dir path and tell him to create bundles from **bundle.neon**.
36+
````PHP
37+
$webloader = new \WebLoader\Engine('path/to/webtemp');
38+
$webloader->createFilesCollectionsFromConfig('path/to/bundle.neon');
39+
````
4740

48-
**Nette framework:**
41+
The last step is to call files collections render to render css files collection named my-bundle.
42+
````PHP
43+
echo $webloader->getFilesCollectionRender()->css('my-bundle');
44+
````
4945

50-
Configuration file
51-
````YAML
46+
The PHP file after the last edit will looks like this:
47+
````PHP
48+
$webloader = new \WebLoader\Engine('path/to/output/dir');
49+
$webloader->createFilesCollectionsFromConfig('path/to/bundle.neon');
50+
51+
echo $webloader->getFilesCollectionRender()->css('my-bundle');
52+
````
53+
54+
The output will be similiar to the following code:
55+
````html
56+
<link type="text/css" rel="stylesheet" href="/path/to/webtemp/my-bundle.css?v=1512829634">
57+
````
58+
59+
## Quick start (for Nette Framework)
60+
For the Nette Framework it is very similar. First of all, register Web Loader extension.
61+
62+
````yaml
5263
extensions:
5364
webloader: WebLoader\Bridges\Nette\WebLoaderExtension
54-
65+
````
66+
67+
Next step is to add Web Loader section with my-bundle collection configuration inside.
68+
````yaml
5569
webloader:
56-
outputDir: path/to/webtemp
5770
filesCollections:
58-
critical:
71+
my-bundle:
5972
cssFiles:
60-
- path/to/file.css
61-
cssLoadContent: TRUE
62-
63-
homepage:
64-
cssFiles:
65-
- path/to/file.css
66-
cssFilters:
67-
- urlFilter
68-
69-
jsFiles:
70-
- path/to/file.js
71-
72-
filesCollectionsContainers:
73-
homepage:
74-
cssCollections:
75-
- critical
76-
- homepage
77-
78-
jsCollections:
79-
- homepage
73+
- path/to/style-a.css
74+
- path/to/style-b.css
8075
````
8176

82-
Presenter
77+
In your presenter, inject the engine...
8378
````PHP
8479
/**
8580
* @var Engine
@@ -91,66 +86,19 @@ public function __construct(\WebLoader\Engine $engine)
9186
{
9287
$this->webLoader = $engine;
9388
}
89+
````
9490

95-
91+
and set template parameters (for example in the **beforeRender** method).
92+
````PHP
9693
public function beforeRender()
9794
{
98-
$this->webLoader
99-
->addCssFilter('urlFilter', function(string $code, string $file) {
100-
$filter = \WebLoader\Filters\CssUrlFilter('path/to/webtemp');
101-
return $filter->filter($code, $file);
102-
}, TRUE)
103-
104-
->addJsFilter('minify', function(string $code) {
105-
$closureCompiler = new \GoogleClosureCompiler\Compiler;
106-
$response = $closureCompiler->setJsCode($code)->compile();
107-
108-
if ($response && $response->isWithoutErrors()) {
109-
return $response->getCompiledCode();
110-
}
111-
112-
return $code;
113-
});
114-
11595
$this->template->setParameters([
116-
'webloaderContainersRender' => $this->webLoader->getFilesCollectionsContainerRender()->selectContainer('homepage')
96+
'webloaderFilesCollectionRender' => $this->webLoader->getFilesCollectionRender()
11797
]);
11898
}
11999
````
120100

101+
The last step is to call the render in a latte template.
121102
````LATTE
122-
{$webloaderContainersRender->css()|noescape}
123-
{$webloaderContainersRender->js()|noescape}
124-
````
125-
126-
## Output examples:
127-
````html
128-
<!-- $render->css('style') -->
129-
<link type="text/css" rel="stylesheet" href="style.css?v=1508834107">
130-
131-
<!-- $render->css('style', [], TRUE) -->
132-
<style type="text/css">
133-
/* Code */
134-
</style>
135-
136-
<!-- $render->cssPreload('style') -->
137-
<link rel="preload" href="style.css?v=1508834107" as="style">
138-
139-
<!-- $render->cssPrefetch('style') -->
140-
<link rel="prefetch" href="style.css?v=1508834107">
141-
142-
143-
<!-- $render->js('script') -->
144-
<script type="text/javascript" src="script.js?v=1508834107"></script>
145-
146-
<!-- $render->js('script', [], TRUE) -->
147-
<script type="text/javascript">
148-
// Code
149-
</script>
150-
151-
<!-- $render->jsPreload('script') -->
152-
<link rel="preload" href="script.css?v=1508834107" as="script">
153-
154-
<!-- $render->jsPrefetch('script') -->
155-
<link rel="prefetch" href="script.css?v=1508834107">
103+
{$webloaderFilesCollectionRender->css('my-bundle')|noescape}
156104
````

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "machy8/webloader",
33
"description": "Simple, easy to use, php bundler for javascript and css",
44
"keywords": ["webloader", "module-bundler", "javascript", "css", "frontend", "build-tool"],
5-
"license": "New BSD License",
5+
"license": "BSD-3-Clause",
66
"require": {
77
"php": ">=7.0",
88
"nette/neon": "^2.4"

‎docs/Filters.md‎

Lines changed: 74 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,84 @@
11
# Filters
22
- Separated for **CSS** and **JS** so they can have the same name.
33
- They can be initialized for each file in files collection or once for whole collection after all files are loaded.
4+
- Is possible to check whether the filter is already defined
45

6+
**Filters definition**
57
````php
6-
$webLoader
7-
->addCssFilter('urlFilter', function (string $code, string $filePath) {
8-
// filter url
9-
return $code;
10-
})
11-
8+
$webLoader ->addCssFilter('urlFilter', function (string $code, string $filePath) {
9+
// filter url
10+
return $code;
11+
});
12+
13+
if ( ! $webLoader->getCompiler()->filterExists(Engine::JS, 'minifier') {
1214
// If you want to run filter for each file of file collection separatelly, set third parameter to TRUE
13-
->addJsFilter('minifier', function (string $code) {
15+
$webloader->addJsFilter('minifier', function (string $code) {
1416
// Minify
1517
return $code;
1618
}, TRUE);
19+
}
20+
````
21+
22+
**Usage (configuration in a NEON file)**
23+
````YAML
24+
myCollection:
25+
cssFiles:
26+
- somefile.css
27+
cssFilters:
28+
- urlFilter
29+
30+
jsFiles:
31+
- somefile.js
32+
jsFilters:
33+
- minifier
34+
````
35+
36+
**Usage (in pure PHP)**
37+
````PHP
38+
$webloader
39+
->createCssFilesCollection('myCollection')
40+
->setFiles(['somefile.css'])
41+
->setFilters(['urlFilter']);
42+
43+
$webloader
44+
->createJsFilesCollection('myCollection')
45+
->setFiles(['somefile.js'])
46+
->setFilters(['minifier']);
47+
````
48+
49+
## Default filters
50+
There are two filters that comes with webloader.
51+
52+
### Url filter
53+
This filter modifies url in css files according to output directory for correct assets loading. Is recommended to run it for each file separatelly.
54+
55+
````PHP
56+
$webloader->addCssFilter('urlFilter', function ($code, $filePath) use ($outputDir, $documentRoot) {
57+
$filter = new CssUrlFilter($outputDir, $documentRoot);
58+
return $filter->filter($code, $filePath);
59+
}, TRUE);
60+
````
61+
62+
### Breakpoints filter
63+
This filter extracts css from output files and creates new files with defined prefixes and put the correct css inside. Is recommended to run it for the whole collection. You can add filter for each file that is generated in the Breakpoints filter.
64+
65+
````PHP
66+
$webloader->addCssFilter('cssBreakpointsFilter', function ($code, $collectionPath) use ($cssMinifier) {
67+
$breakpoints = [
68+
'medium' => ['px' => [768, 1023]], // For breakpoints between 640px up to 1023px
69+
'large' => ['*'] // For every other breakpoints
70+
];
71+
72+
$filter = new CssBreakpointsFilter($breakpoints);
73+
$filter->addOutputFilesFilter(function ($code) use ($cssMinifier) {
74+
return $cssMinifier->run($code);
75+
});
76+
return $filter->filter($code, $collectionPath);
77+
});
78+
````
79+
Rendering then looks like this:
80+
````PHP
81+
$webloaderFilesCollectionRender->css('myCss');
82+
$webloaderFilesCollectionRender->setPrefix('medium')->css('myCss', ['media' => 'screen and (min-width: 768px)']);
83+
$webloaderFilesCollectionRender->setPrefix('large')->css('myCss', ['media' => 'screen and (min-width: 1024px)']);
1784
````

0 commit comments

Comments
 (0)