Combining and Minifying JavaScript and CSS files

The page controller class has two methods which allow you to combine and minify JavaScript and CSS resources. These methods are js_combine and css_combine. With these methods you can:

• Combine multiple JavaScript or CSS files into a single file, reducing the number of external requests on a page.
• Minify the resource files. LemonStand automatically minifies and compresses resource files with GZIP.

These methods allow you to include both local and remote files. LemonStand automatically processes relative URLs in CSS combined files. 

The methods have 3 parameters - the file list, options and the show_tag parameter (see below). Example:

<?= $this->js_combine(array(
  'jquery',
  'ls_core_jquery',
  '/resources/javascript/demo_effects.js'))?>

<?= $this->css_combine(array(
   'ls_styles',
   '/resources/css/styles.css'
  ),
  array(
   'src_mode'=>true
)) ?>

{{ js_combine([
  'jquery', 
  'ls_core_jquery', 
  '/resources/javascript/demo_effects.js'
]) }}
    
{{ css_combine([
  'ls_styles',
  '@css/styles.css',
  '@css/slimbox.css'], 
  {'src_mode': true}
) }}

• Local resources, specified relative to the LemonStand root directory (in the file system). For example: /resources/javascript/myscript.js
• Remote resources, for example: http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js
• Aliases. Aliases are just short notations of some JavaScript or CSS resources included to LemonStand. Supported aliases are:
  • mootools - corresponds the /modules/cms/resources/javascript/mootools_src.js script. Contains the MooTools framework core classes.
  • ls_core_mootools - corresponds the /modules/cms/resources/javascript/ls_mootools_core_src.js script. Contains MooTools-specific LemonStand front-end classes.
  • jquery - corresponds the /modules/cms/resources/javascript/jquery_src.js script. Contains jQuery framework core classes.
  • jquery_noconflict - corresponds the /modules/cms/resources/javascript/jquery_noconflict.js script. Contains the jQuery noConflict() call.
  • ls_core_jquery - corresponds to the /modules/cms/resources/javascript/ls_jquery_core_src.js script. Contains jQuery-specific LemonStand front-end classes.
  • ls_styles - corresponds the /modules/cms/resources/css/frontend_css.css file. Contains CSS declarations for styling the AJAX loading indicator.

The second parameter is an options array. This parameter is optional. The supported options are:

• reset_cache - reset the file cache. LemonStand caches combined files on the server. By default it updates the cache as soon as any of the cached files is changed. However it cannot track updates of remote files. You can use this parameter for forcing LemonStand to update the file cache.
• skip_cache - do not cache the combined files.
• src_mode - do not minify the combined files (leave the comments, and formatting as is).

The third parameter is optional. It determines whether link or script tag should be returned. The default value is true, meaning that the tag is returned. If you want to create the tag manually pass false to this value. Example: 

<!-- Attach "version number" to the CSS request, forcing browsers to update the cache -->

<link rel="stylesheet" type="text/css" href="<?= $this->css_combine(array(
   'ls_styles',
   '/resources/css/styles.css'
  ), array(), false) ?>&ver=2"/>

<!-- Attach "version number" to the CSS request, forcing browsers to update the cache -->

<link rel="stylesheet" type="text/css" href="{{ css_combine([
   'ls_styles',
   '/resources/css/styles.css'
  ], {}, false) }}&ver=2"/>

Minimum requirements

In order the LemonStand front-end JavaScript framework to work properly, you need to include two JavaScript files to your pages - the framework core, and framework-specific LemonStand front-end library. LemonStand currently supports two frameworks - MooTools and jQuery. To include the required MooTools-specific libraries, call the js_combine() method with the mootools and ls_core_mootools aliases:

<?= $this->js_combine(array(
  'mootools',
  'ls_core_mootools')) ?>

{{ js_combine([
  'mootools',
  'ls_core_mootools']) }}

To include the required jQuery-specific libraries, call the js_combine() method with the jquery and ls_core_jquery aliases:

<?= $this->js_combine(array(
  'jquery',
  'ls_core_jquery')) ?>

{{ js_combine([
  'jquery',
  'ls_core_jquery']) }}

LemonStand also includes a CSS file for styling the AJAX loading indicator. You can include it with the ls_styles alias in the css_combine() method:

<?= $this->css_combine(array('ls_styles')) ?>

{{ css_combine(['ls_styles']) }}

Note: the include_resources() function still can be used for linking required JavaScript and CSS files. However we recommend to use the new approach, because it is more flexible and provides better website performance.

Using the resource combiner with themes

You can use the @ symbol to indicate that a file should be loaded from the current theme resources directory (/themes/theme-code/resources). For example, this will create a link to the /themes/mobile/resources/javascript/effects.js file:

<?= $this->js_combine(array('@javascript/effects.js')) ?>

{{ js_combine(['@javascript/effects.js']) }}

If theming is disabled, the @ symbol refers to the website resources directory (/resources by default).

Next: Creating Editable Blocks
Previous: The Page Basics
Return to Getting Started