CSS and JavaScript packager

CSS and JavaScript packager are used to combine JS and CSS files used on a page into one package. That is, one for JS, of course, and one for each type of media for CSS. The packager can handle not only local files, but also those from foreign sources. The packager does not perform any minification and compression. This is not its purpose. After all, compression to reduce data volume can be handled very elegantly by the webserver. The goal of the packager is to reduce the amount of resources needed to a minimum. CSS packer performs the transformation of relative resource addresses to absolute addresses.

We have already encountered the packager in MVC layout, which is directly linked to the packager. JS and CSS are inserted via the layout instance, and the layout then uses the packager - if the packager is enabled. So when you use the layout, you are also using the packager, just not directly, but indirectly. However, you can also use the packager on its own, and we're going to show that now.

Using the packager

Using the packager on its own is essentially straightforward. It works like this:


use Jet\Factory_PackageCreator;

use Jet\SysConf_URI;



$CSS_main = [

    'https://somewhere/something.css',

    SysConf_URI::getCss() . 'my.css'

];



$CSS_print = [

    'https://somewhere/something_print.css',

    SysConf_URI::getCss() . 'my_print.css'

];



$JS = [

    'https://somewhere/something.js',

    SysConf_URI::getCss() . 'my.css'

];





$CSS_package_main = Factory_PackageCreator::CSS( '', $CSS_main );

$CSS_package_main->generate();



$CSS_package_print = Factory_PackageCreator::CSS( 'print', $CSS_print );

$CSS_package_print->generate();



$JS_package = Factory_PackageCreator::CSS( $JS );

$JS_package->generate();

And then you just need to insert the packages into the HTML:


<link rel="stylesheet" type="text/css" href="<?=$CSS_package_main->getPackageURI();?>"/>

<link rel="stylesheet" type="text/css" href="<?=$CSS_package_print->getPackageURI();?>" media="print"/>

<script src="<?=$JS_package->getPackageURI()?>"></script>

Atention! Please note that the factories are again used to create package instances.

Packager methods (common to all classes)

Method	Meaning of
JS: public __construct( array $URIs ) CSS: public __construct( string $media, array $URIs )	The constructors need to be given a list of files from which to create the package. The CSS package builder also needs to know the type of media for which the CSS is intended.
public generate( ): void	Performs a package generation. That is, if the package file does not exist yet, it builds and writes the package. Verifies the existence of the package automatically. Beware! It does not perform any checksums of the contents of source files and the like. That is, it does not verify that the source file has not changed. That would be very time consuming and counterproductive. In practice, this is solved by deleting package files after changes have been deployed. However, if the source file name changes, or if a source file is added/removed, this change is already detected and a new package is generated in a new file (with a different name).
public getPackageURI( ): string	Returns the address of the package for use in HTML. Returns the address even if the package is not generated.
public getPackagePath( ): string	Returns the full path to the package file. Returns the path even if the package is not generated.

Packager classes

As we have already discussed, it is recommended to use factories to get the package instances.

But for the sake of completeness, let's add that packages are represented by the Jet\PackageCreator_CSS_Default and Jet\PackageCreator_JavaScript_Default classes, which inherit from the Jet\PackageCreator_CSS and Jet\PackageCreator_JavaScript abstract classes, and all share a common parent abstract class Jet\PackageCreator.

You probably have the option to inherit from these classes and make your own implementations of the packagers that you pass to the system via the factory, and even if you don't use the packagers directly but via layout, your classes and implementations will be used.