Download the newest version of phpLivePacker, extract it and copy the whole folder into your template directory. Make sure the cache directory is writeable for PHP to make the internal caching system work. If you manage your web project with a version control system like SVN or Git, make sure to exclude files within the cache directory from version control. If you want to include CSS and JS files via nice URLs, make sure mod_rewrite is enabled and .htaccess files are allowed for the phpLivePacker directory. You can use the included admin interface to get more information and check if the requirements are met (Call the phpLivePacker directory in your web browser and choose admin interface from the visible start page).

You can check proper functionality and accurate browser detection via the included test suite. Call the phpLivePacker directory in your web browser and choose test suite from the visible start page. By the way, the start page lists all available sets.

demo of the phpLivePacker interface

You can control caching, minifying and development features by the basic phpLivePacker configuration, which you can find under conf/phplivepacker.ini in the phpLivePacker directory. All configuration files within phpLivePacker are standardised PHP INI files and well commented. You can use the included admin interface to check if your settings meet the recommendations (Call the phpLivePacker directory in your web browser and choose admin interface from the visible start page).

All CSS/JS files which should be delivered are organized within so-called sets. These file sets are defined via PHP INI configuration files in the directory conf/sets/. The name of the set is defined by the file name of the PHP INI file, so make sure to use web safe characters. The default set used - if phpLivePacker is called without the set parameter - is predefined as default.ini. For each set, you are able to organize your CSS/JS files within different sections. There are the sections safe and basic and furthermore an unlimited number of browser conditions. All files placed within the section safe will be always included but never get minified or cleaned up - the best place for already minified JS libraries. Just like the section safe the section basic is always included regardless of detected browser and operating system but will get cleaned up and minified. The different browser and operating system conditions are well documented in the default.ini file and will allow you to add CSS/JS files only if a specified browser, browser version, browser engine or operating system is detected. It is also possible to combine or negotiate different conditions.

samples

• [ie]: all versions of Internet Explorer
• [ie >= 9]: all versions of Internet Explorer greater or equal 9
• [(!windows)]: all browsers on all operating systems other than Windows
• [firefox (windows)]: all Firefox versions on Windows
• [safari 5 (osx)]: Safari version 5.x on Mac OS X
• [ie 9, ie >= 10, firefox]: Internet Explorer 9, Internet Explorer greater or equal 10 and Firefox

phpLivePacker generated CSS/JS files are included like every other CSS/JS file into the html header. The syntax is as follows:

<style/script>[_<set>][_v<counter>].<css/js>

<style/script>: Use the filename style to get CSS files and script to get JS files.
[_<set>]: Define the needed set, if not specified the default set is returned.
[_v<counter>]: An optional counter to override browser caching on the client by changing the file name.
<css/js>: Use appropriate file extension for CSS or JS resources.

File names are following these examples:

• style.css, script.js
• style_v1.css, script_v1.js
• style_test.css, script_test.js
• style_test_v45.css, script_test_v45.css

If the Apache HTTP Server module rewrite is not available or deactivated for security reasons, it is also possible to call the phpLivePacker script via parameters.

phplivepacker.php?type=<css/js>&set=<set>

phpLivePacker was created to make web development much more comfortable. The integrated browser detection and different debug settings will allow developers to code efficiently. So you can disable minifying, combining, code clean up or even override browser detection values for easy debugging. Make sure to exclude your development systems by domains or IP addresses from caching. phpLivePacker rewrites relative paths within your CSS files to deliver images even after combining single files from different directories.

Use the phpLivePacker TYPO3 extension for simple cache management within the TYPO3 backend.

• Download phpLivePacker Extension as .t3x file and install it via the extension manager.
• Copy the file /typo3conf/ext/bw_phplivepacker/sample/phplivepacker.ts (an external TypoScript file) into the fileadmin directory and set the appropriate path to your phpLivePacker directory in the file.
• Include the external TypoScript file into your TypoScript configuration via the following line of TypoScript.

<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/typoscript/constants/phplivepacker.ts">

• Configure the extension within the extension manager and modify the paths to your phpLivePacker cache directory and the copied TypoScript file.
• Now you are able to include the phpLivePacker CSS/JS resources via the following lines of TypoScript into the HTML header.

page.includeCSS {
    # default css file
    file1 = {$protocol}://{$host}/{$phplivepackerPath}style_v{$phplivepackerVersion}.css
    file1.external = 1
}

page.includeJS {
    # default js file
    file1 = {$protocol}://{$host}/{$phplivepackerPath}script_v{$phplivepackerVersion}.js
    file1
}

If you have changed CSS or JS files, you can quickly clear the phpLivePacker cache via the new cache management option Clear phpLivePacker cache within the TYPO3 backend. Due to TYPO3 security restrictions, the extension is not able to clear the page content cache. Hence do not forget to clear the front end cache manually after clearing the phpLivePacker cache (because the virtual version number provided in the CSS/JS file path increased).

Use the phpLivePacker WordPress plugin for simple cache management within the WordPress admin interface.

• Download the phpLivePacker plugin as .zip file and install it via the admin interface section Plugins.
• Copy the file /wp-content/plugins/phplivepacker/sample/phplivepacker.php into the root path of your theme and configure the appropriate path to the phpLivePacker directory in the file.
• Include the phplivepacker.php file into the header.php file of your WordPress theme.

<?php
    require_once(get_template_directory() . '/phplivepacker.php');
?>

• Now include your phpLivePacker CSS/JS resources into the HTML header (header.php) of your theme with the following lines of code.

<link rel="stylesheet" type="text/css" href="<?php echo htmlspecialchars(home_url() . '/' . PHPLIVEPACKER_PATH); ?>style_v<?php echo PHPLIVEPACKER_VERSION; ?>.css" />
<script language="javascript" src="<?php echo htmlspecialchars(home_url() . '/' . PHPLIVEPACKER_PATH); ?>script_v<?php echo PHPLIVEPACKER_VERSION; ?>.js" type="text/javascript"></script>

• Go to the WordPress admin interface and choose phpLivePacker from the section Settings. Change the settings and define the correct paths to the phpLivePacker cache directory and the phplivepacker.php file.

If you have changed CSS or JS files, you can quickly clear the phpLivePacker cache via the new cache management option Clear phpLivePacker cache within the WordPress admin interface.