phpLivePacker

phpLivePacker is a PHP based Open Source on-the-fly CSS/JS file packer with browser conditions.

  • is able to deliver different CSS/JS depending on browser, browser version and operating system
  • combines multiple CSS/JS source files into one output file
  • removes comments from source files
  • directly includes icons as Base64 encoded strings
  • caches output files for optimum performance
  • allows easy cross browser development and debugging
  • is simple to configure
  • easy CMS backend integration into TYPO3 and WordPress

phpLivePacker 1.4

download (as .zip)

About

combines even high fragmented CSS/JS file structures

Combines and minifies multiple input source files to one output file on the fly.

differs between browsers, browser versions and operating systems

Delivers different CSS/JS file combinations depending on a browser, browser engine, browser version or operating system. It is even possible to combine and negotiate single conditions.
e.g.: Deliver a file only if browser is Internet Explorer and its version is lower or equal 9. Deliver a file only if browser is not Firefox and operating system is Windows.

caches output files and browser detection results

Generated output files and browser detection results are cached for an optimum in performance.

reduces file size

CSS/JS files are minified and gzipped before delivered to the browser, for a minimum file size.

removes all of your comments

phpLivePacker protects your development knowhow by removing all comments from CSS/JS files before delivered to the client.

provides different file sets

Generate an unlimited number of different sets of CSS/JS files for e.g. start page and subpage.

includes icons as Base64 encoded strings

Directly include small icons as Base64 encoded strings into your CSS.

generates arrays of all images included via CSS

Generate JS or JSON-Arrays for preloading all images included in your CSS files automatically.

allows simple and fast configuration through ini files

phpLivePacker and its file sets are configured via simple and well documented PHP ini files.

supports developers

You can disable caching and minifying on the basis of domains or IP adresses for easy development.

technology independent

phpLivePacker is included like normal CSS/JS files into your html header, thus it can be used from simple html templates through to large CMS solutions.

integrable into your CMS backend

phpLivePacker‘s caching system is fully integrable via extensions into TYPO3 and WordPress.

PHP based

Works on Linux and Windows environments and requires an Apache HTTP Server (with mod_rewrite) and at least PHP 5.3.

Open Source

phpLivePacker is published under the Apache License Version 2.0 with the target to be used and modified.

phpLivePacker allows me to use my own fragmented and well-structured CSS/JS file and folder structure. But the best thing about it is, that I don't need strange CSS hacks anymore.

Download

phpLivePacker 1.4

download (as .zip)

phpLivePacker TYPO3 extension 2.0

download (as .zip)

phpLivePacker WordPress plugin 1.1

download (as .zip)

Change log and version history

phpLivePacker

v1.4 (download as .zip)

  • add feature to directly include images as Base64 encoded strings into CSS files
  • improve minify of CSS files in combination with Base64 encoded strings
  • add feature to generate a JS or JSON array with all local images included in CSS
  • add @import and @font-face CSS rules for web fonts to testsuite
  • add rules for development mode activation to phplivepacker config and always disable caching in development mode
  • rewrite img urls and minify CSS files included via @import in development mode

v1.3.1 (download as .zip)

  • add option to detect opera version >=15 as chrome (as published by the user agent) instead of opera

v1.3 (download as .zip)

  • first published version

phpLivePacker TYPO3 extension

v2.0 (download as .zip)

  • rewrite to be compatible with TYPO3 6.2
  • dropped support for older TYPO3 versions

v1.1 (download as .t3x)

  • first published version

phpLivePacker WordPress plugin

v1.3 (download as .zip)

  • first published version

License

phpLivePacker is published under the Apache License Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0.txt).

  • Use phpLivePacker for profit and non-profit projects.
  • Use phpLivePacker in private and commercial environment.
  • Feel free to modify phpLivePacker to your needs and redistribute your work as you like.
  • Make sure you mention the original license and the origin of phpLivePacker in all of your works.

Documentation

quick start

  1. Download phpLivePacker and extract it into your html template directory.
  2. Grant writing permission to the cache directory within the phpLivePacker root directory.
  3. Ignore files within the cache directory in your version control system.
  4. Check in your Apache HTTP Server settings if mod_rewrite is enabled and .htaccess files are allowed within your project directory.
  5. Call the test suite and check if all necessary tests got passed.
  6. Exclude your development environment from caching (configurable in conf/phplivepacker.ini).
  7. Define at least the default file set under conf/sets/default.ini.
  8. Integrate phpLivePacker's CSS/JS resources into your html code.

phpLivePacker

setup

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

test suite

You can check proper functionality and correct 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

basic configuration

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 standardized PHP ini files and are 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).

sets

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 operation 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

documentation of conditions

basic conditions

[safe] files always get included, but will not be minified or cleaned up (use for already minified sources)

[base] files always get included

browser and operating system conditions

[<!>browser <operator> version (<!>os)]
[<!>engine (<!>os)]

samples:

  • ie
  • !ie
  • !ie 6
  • safari 5
  • firefox < 19
  • chrome (windows)
  • opera <= 12.14 (!osx)
  • webkit (windows)
  • safari >= 5
  • (ios)

operator: =, !=, <, <=, >, >=
browser: ie, firefox, opera, safari, chrome or unknown
engine: webkit, gecko, presto, trident (not in combination with version number)
version: version number (minor: 3.5, major: 4)
os: windows, osx, linux, ios, android, symbian, blackberry, wince, windowsphone or unknown

combine conditions (OR): [condition1,condition2,condition3]

HTML integration

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>

development hints

phpLivePacker was created to make web development much easier. 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 on a basis of domains or IP adresses from caching. phpLivePacker rewrites relative paths within your CSS files to deliver images even after combining single files from different directories.

TYPO3 extension

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 simply 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).

WordPress plugin

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 simply clear the phpLivePacker cache via the new cache management option Clear phpLivePacker cache within the WordPress admin interface.