Download the PHP package requtize/assetter without Composer

Assetter

Assets manager for PHP. Allow manage CSS and JS files in website and its dependencies. Also allows refresh cache in browsers by adding revisions of loaded files. Assetter allows you to register namespaces for files paths fo better managing if required.

Installation

Via composer.json

Via Composer CLI

Table of contents

• Basics
  1. Define collection array
  2. Create Assetter object
  3. Load some libraries
  4. Show loaded files in document
• Register Asset as part of Collection
• Namespaces
  1. Register namespace
  2. Usage registered namespaces
• LESS ans SCSS Compilers
  1. Usage

Basics

1. Define collection array

First, you have to create array with collection of files.

Here is full indexed array of one element in collection.

• scripts - Stores array of JavaScript files paths (sigle value (as string) NOT ALLOWED).
• styles - Stores array of CSS files paths (sigle value (as string) NOT ALLOWED).
• require - Stores array of names of libraries/assets (elements from collection) that must be loaded with this library. Dependencies.
• order - Number of position in loaded files. Lower number = higher in list.
• group - Group this library belongs to.
• collection - Collection of assets from different modules. Read more on Register Asset as part of Collection

2. Create Assetter object

Now we have to create object of Assetter. To work with Assetter You have to create collection (array) of assets that Assetter can manage.

3. Require some libraries

Now, we can require some libraries. Here we require our theme asset, which required also jquery asset.

4. Show required files in document

We have required our files. Now it's time to show it in document. To do this, You have to build a collection for group of the assets, and then get the rendered assets.

To render the assets tags use one of the following method using the group.

Register Asset as part of Collection

Lets say, You have script that manage Dynamic Forms. Script implements plugins that needs to be loaded with it. But plugins have different names and exists in dirrerent parts of app. How to load our script and all of the modules?

Assetter have functionality calles collections. Collection is a name of some number of separate assets, that will be loaded as whole, when You require name of the collection.

In example, we have main script, and define two plugins. Now all of these scripts have the same collection named my-collection:

Now, You only need to call require() with name of the collection:

Assetter loads all the assets withing the my-collection collection.

Assets will be required in order of declaring, or in order of require option defined in each of asset (if defined).

Namespaces

You can define namespaces, that will be applied for every asset path, which use it. Think of namespace (in this case) like some Root path to somethig, like root path to images in your project, or to (more for this) assets path. You can register multiple namespaces, and use multiple namespaces in paths to files for assets. What u need.

1. Register namespace

To register namespace, call belowed method. First argument is the name of namespace, you want to register. Second argument is a path to some directory. Followed code shows, how register two namespaces.

REMEMBER - register namespaces before load any asset. Namespaces works only when is needed, so only when you load (or append) any asset. Registered namespaces after load or append won't work.

2. Usage registered namespaces

When we have registered namespaces, we only now have to add name of namespace to these files path, we need to. Followed example, shows two assets, one works with namespace, second - without.

Namespace can be named as you want, here i provide proposal, you can use any way of name convencion, like: {NS}, [NS], %NS, |NS|, -NS, and combine small and big letters as names. But remember to add some special characters. Assetter uses str_replace for seach and replace namespaces, so if you named namespace with only letters, some assets paths can be damaged.

How to require CSS in \ and JS in \?

This separation of the elements is a common technique, tha allows web browsers renders a fully styled content, without rendering and downloading any JavaScripts at the beginning. Nowadays we require so many JS libs in our websites, all those files must be downloaded by browser at the place of occurence. Moving those files at the end of the body speeds up the page load.

To achive that, You have to define the head and the body part of the asset, and then mix them together into one, like this:

That defined asset You have to only require using the mixed name bootstrap. Assetter take care of the rest of the assets, and build them into proper defined group in building time.

Last part, you have to only build assets separate for HEAD and for the BODY.