This entire chapter refers to a feature that was added in version 4.18.1

The JS File Folder asset allows you to create a folder of JS File assets that can be merged, minified and served 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 or similar to those for a Standard Page and are described in the Asset Screens manual. In this chapter, we will describe the Details screen, which is different for a JS File Folder.

Details Screen

The Details screen for a JS File Folder allows you to configure the general settings of the asset and link associate JS File assets. For more information about the Status, Future Status and Thumbnail sections of this screen, refer to the Details chapter in the Asset Screens manual.

Details

The Details section of the Details screen allows you to configure the general settings of the JS File Folder asset. The Details section is shown in the figure below.

The Details section of the Details screen

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 first created. You can change the Title by entering a new value in this field and clicking Commit.
• File Name: the file name of the JS File Folder. By default, this will be the Title that was specified when the asset was first created, along with the file extension, for example, JS_File_Folder.min.js. You can change the name of the file by entering a new value in this field and clicking Commit.
• Last Updated: the date that the contents of the JS File Folder was last updated, i.e. when the merged file was last regenerated.
• Allow Unrestricted Access: depending on what this setting is, the Status of the JS File Folder and whether or not Public Read access has been granted, Squiz Matrix will use different style URLs.
  • Yes: if the Status of the JS File Folder is Under Construction and Public Read access has been granted then a human readable URL will be used, for example, http://www.example.com/JS_File_Folder.min.js. This means that it is served dynamically from the Squiz Matrix repository and hence is not optimal in terms of performance.
    
    If the Status of the File is Live and Public Read access has been granted then a static URL will be used, for example http://www.example.com/__data/assets/image/100/JS_File_Folder.min.js, where 100 is the asset ID of the JS File Folder. The static URL gives optimal performance as it is served directly by the web server.
  • No: if this setting is No, then the human readable URL will be used. This may be required if an external system is referencing the file and needs to use the dynamic human readable URL.
  The default setting of the Allow Unrestricted Access field is Yes.

Linked Files

Once you have created a JS File Folder asset, you can select its associated JS File assets in the Linking section of the Details screen. The Linking section is shown in the figure below.

The Linked Files 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 File assets, click the More... button; new fields will be displayed on the screen. Once you have selected the JS Files to link, click Commit.

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 Map.

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 assets are merged and whether or not the code will be minified. The Minification section is shown in the figure below.

The Minification section of the Details screen

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 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. Please note that in order to use this option, the Closure Compiler tool must be configured on the External Tools Configuration screen. For more information, refer to the External Tools Configuration chapter in the System Configuration manual.
  • Closure Compiler - Create Source Map: as above, 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 allows you to specify whether or not the JS File Folder's merged file will be automatically regenerated when any of the linked files have been modified.
• Regenerate File: this field allows you to regenerate the JS File Folder's merged file, for example, if the content of a linked JS File asset has been modified. To regenerate the JS File Folder's merged file, select this checkbox and click Commit.

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, as shown in the figure below.

The Source Map Files screen (without content)

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.

An example Source Map File is shown in the figure below.

Example source map content on the Source Map Files screen

When a JS File Folder has generated a source map file, you will be able to use the developer tools within your browser to automatically parse the source map and view the individual JS File content of the asset.

Parsing the source map file

Example

The following example shows the merging of 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