.. You may want to use the usual include line. Uncomment and adjust the path. 
.. include:: ../Includes.txt


============================
Javascript and CSS Optimizer
============================

:Author:
      Kasper Skårhøj

:Created:
      2002-11-01T00:32:00

:Changed:
      2010-01-06T14:18:28.290000000

:Classification:
      js_css_optimizer

:Keywords:
      forDevelopers, forIntermediates

:Author:
      Axel Jung

:Email:
      axel.jung@aoemedia.de

:Info 4:


:Language:
      en


|img-1| |img-2| Javascript and CSS Optimizer - js\_css\_optimizer


.. _Javascript-and-CSS-Optimizer:

Javascript and CSS Optimizer
============================

Extension Key: js\_css\_optimizer

Language: en

Keywords: forDevelopers, forIntermediates

The content of this document is related to TYPO3

\- a GNU/GPL CMS/Framework available from www.typo3.org

.. _Table-of-Contents:

Table of Contents
-----------------

`Javascript and CSS Optimizer 1
<#1.Javascript%20and%20CSS%20Optimizer|outline>`_

**`Introduction 3 <#1.1.Introduction|outline>`_**

`What does it do? 3 <#1.1.1.What%20does%20it%20do_|outline>`_

**`Users manual 4 <#1.2.Users%20manual|outline>`_**

**`Administration 5 <#1.3.Administration|outline>`_**

`Caching 5 <#1.3.1.Caching|outline>`_

**`Configuration 6 <#1.4.Configuration|outline>`_**

`Typoscript 6 <#1.4.1.Typoscript|outline>`_

`Add Files with php 6 <#1.4.2.Add%20Files%20with%20php|outline>`_

**`Known problems 8 <#1.5.Known%20problems|outline>`_**

**`To-Do list 9 <#1.6.To-Do%20list|outline>`_**


.. _Introduction:

Introduction
------------


.. _What-does-it-do:

What does it do?
^^^^^^^^^^^^^^^^

- It provide Hooks to optimize the Javascript and CSS in the page render
  prozess.

- It compress Javascript and CSS Files.

- It bundle the JavaScript and CSS Files.


.. _Users-manual:

Users manual
------------

The Extension doesn't do the compress and bundle logic automatically.

You have to activate the compression and bundling in typoscript or
directly with the pageRender.


.. _Administration:

Administration
--------------

In the Extension Manager you could configure the CSS Compression. The
extension use the CSSTidy library http://csstidy.sourceforge.net/.

|img-3|

You could also disable the CSS or Javascript bundle functionality
separately.

|img-4|


.. _Caching:

Caching
^^^^^^^

The new files would be cached in the typo3temp Folder. They wouldn't
renew if a css and js file is changed.

To clear the cache use the Clear Cache Button in Typo3 Backend.


.. _Configuration:

Configuration
-------------


.. _Typoscript:

Typoscript
^^^^^^^^^^


.. _CSS-compression:

CSS compression
"""""""""""""""

Import the css like this:

page {

includeCSS {

screenStyle = ..../base.css

screenStyle {

media = screen

import = 0

compress=1

}


.. _JS-compression:

JS compression
""""""""""""""

To activate the JS compression:

page{

includeJS {

file1 = ....common.js

file1.compress=1

…


.. _Bundling:

Bundling
""""""""

To bundle the files:

config.concatenateJsAndCss = 1


.. _Hint:

Hint
""""

Use the  **includeJSlibs** to create a separate bundle and use the
browser caching for script which are needed on every page.

You could use the  **forceOnTop** setting, to control the order of the
content in the bundle.

page.includeJSlibs{

jquery = ...jquery-1.3.2.min.js

jquery.forceOnTop = 1

common={$const.path.scripts}common.js

common{

compress=1

}

...

}


.. _Add-Files-with-php:

Add Files with php
^^^^^^^^^^^^^^^^^^

To add JS and CSS files with php from your extension don't use the
$GLOBALS['TSFE']->additionalHeaderData functionality.

You have to add the files with the pagerender

$pagerender = $GLOBALS['TSFE']->getPageRenderer();

$pagerender->addCssFile($file, $rel = 'stylesheet', $media = 'screen',
$title = '', $compress = TRUE, $forceOnTop = FALSE, $allWrap = '');

$pagerender->addJsFile($file, $type = 'text/javascript', $compress =
TRUE, $forceOnTop = FALSE, $allWrap = '');

$pagerender->addCssInlineBlock($name, $block, $compressed = FALSE,
$forceOnTop = FALSE);

$pagerender->addJsInlineCode($name, $block, $compress = TRUE,
$forceOnTop = FALSE);


.. _Known-problems:

Known problems
--------------

The compression and bundle logic is triggered by the pagerender of
typo3. That means that it works only if you render the page. If you
have a cache page and insert a uncached extension which add a js and
css file to the pagerender, it would have no effect.

But this is a pagerender effect and not of this extension.


.. _To-Do-list:

To-Do list
----------

Support the import rule inside the css files.

9


.. ######CUTTER_MARK_IMAGES######

.. |img-1| image:: img-1.png
.. :align: left

.. |img-2| image:: img-2.png
.. :border: 0
.. :height: 21
.. :hspace: 9
.. :id: Grafik2
.. :name: Grafik2
.. :width: 87

.. |img-3| image:: img-3.png
.. :align: left
.. :border: 0
.. :height: 347
.. :id: Grafik1
.. :name: Grafik1
.. :width: 336

.. |img-4| image:: img-4.png
.. :align: left
.. :border: 0
.. :height: 125
.. :id: Grafik3
.. :name: Grafik3
.. :width: 192