JavaScript file folder asset

The JS file folder asset lets you create a folder of JS file assets that you can merge, minify, and serve as a single, packaged file.

Once created, you can configure the settings of the JS file folder on its associated asset screens. These screens are often the same as (or similar to) those for a standard page. Read the Asset screens documentation for more information about the different common screens in this asset.

This chapter describes the Details screen, which is different for a JS file folder.

Details screen

The Details screen for a JS file folder lets you configure the general settings of the asset and link associate JS file assets.

Read the Asset details screen documentation for general information about the status, future status, and thumbnail sections of this screen.

The details section of the Details screen lets you configure the JS file folder asset’s general settings.

The fields available in this section are as follows:

Title

The friendly name for the JS file folder. By default, this will be the title that was specified when the JS file folder was created.

To change the title:

  1. Enter a new value in this field.

  2. Click Save.

File name

The name of the JS file folder. By default, this will be the title that was specified when the asset was first created. It includes the file extension.

To change the name of the file:

  1. Enter a new value in this field.

  2. Click Save.

Last updated

The date that the contents of the JS file folder were last updated (when the merged file was last regenerated).

Allow unrestricted access

The default setting of this field is Yes.

Matrix will use different URL styles depending various settings.

The following table shows some combinations:

JS file folder status Public read access Allow unrestricted access setting Result

Under construction

Yes

Yes

A human-readable URL will be used.
For example, http://www.example.com/css_file_folder.min.css
This format is served dynamically from the Matrix repository and is suboptimal for performance.

Live

Yes

Yes

A static URL will be used.
For example, http://www.example.com/__data/assets/image/100/css_file_folder.min.css
(where 100 is the asset ID of the JS file folder)
The static URL gives optimal performance as it is served directly by the webserver.

Not applicable

Not applicable

No

A human-readable URL will be used.
This setting may be required if an external system is referencing the file and needs to use the dynamic human-readable URL.

Linked files

You can select the associated JS file and JS design file assets the JS file folder asset in the linking section of the Details screen.

In the linked files field, select the JS file assets to link to the JS file folder.

To select additional JS files and JS design file assets:

  1. Click the More… button.

  2. Selected more JS files.

  3. Click Save.

The files selected in this section will be linked to the JS file folder as notice links and will not be displayed in the asset tree.

You can use the keyword replacement %asset_file_list% to print the content of the JS file folder’s linked file. This keyword can also be used in a global context with the following format: %globals_asset_file_list:[ASSETID]%.

Minification

The minification settings of the Details screen allow you to determine how the linked JS file and JS design file assets are merged and whether or not the code will be minified.

The fields available are as follows:

Compiler

Select the compiler to use for the merging and minification of linked JS file assets.
The options available include:

Merge without minification

The linked JS file assets will be merged without minification.

Basic minification

The linked JS file and JS design file assets will be merged using basic minification.

Closure compiler

This option uses the Closure Compiler tool to merge and minify the linked JS File assets. The Closure Compiler tool must first be configured within the System configuration  External tools configuration screen for this option to work.

Closure compiler - create source map

This option uses the Closure Compiler tool to merge and minify the linked JS file assets, while also creating an associated JavaScript Source Map file.

Auto regenerate file

This field lets you specify whether the JS file folder’s merged file will be automatically regenerated when any of the linked files are modified.

Regenerate file

This field lets you regenerate the JS file folder’s merged file manually. For example, if the content of a linked JS file asset has been modified.

To regenerate the JS file folder’s merged file:

  1. Select this checkbox.

  2. Click Save.

JavaScript source maps

If you are using the Closure compiler - create source map option in the JS file folder’s minification settings, a JavaScript source map will be created for the merged/minified content. You can view this content on the source map files screen.

This source map is used to retrieve information on the individual JS files associated with the JS file folder. When you first create a JS file folder asset or are not using the Closure compiler - create source map option, the source maps screen will be empty:

When the Closure compiler - create source map option has been used, the source map file section of the source map files screen will display the content of the source map file. The associated JS file content will be displayed in the source JS files section.

When a JS file folder has generated a source map file, you can use your browser’s developer tools to parse the source map and view the asset’s JS file content.

Example

The following example shows merging two JS Files using the Closure Compiler minification tool on the JS File Folder asset.

JS file 1:
/**
* Function to return average of two number
*
* @param int a
* @param int b
*/function average(a,b)
{
   return (a+b)/2;

}//end average()
JS file 2:
/**
* Function to print current date
*
*/function showDate()
{
   var d = new Date();
   alert(d.getDate());

}//end showDate()
JS file folder:
function average(a,b){return(a+b)/2};function showDate(){alert((new Date).getDate())};

//# sourceMappingURL=js_file_folder.min.js.map

© 2015-2020 Squiz Pty Ltd