search

flipzoom / ProcessWire-AIOM-All-In-One-Minify

AIOM+ (All In One Minify) is a ProcessWire module to easily improve the performance of your website. By a simple function call Stylesheets, LESS and Javascript files can be parsed, minimized and combined into one single file. This reduces the server requests, loading time and minimizes the traffic. In addition, the generated HTML source code can be minimized and all generated files can be loaded over a cookieless domain (domain sharding).
MIT License
33 stars 26 forks source link

readme

AIOM+ (All In One Minify)

Simple minify and parsing for CSS, LESS, JS and HTML

AIOM+ (All In One Minify) is a ProcessWire module to easily improve the performance of your website. By a simple function call Stylesheets, LESS and Javascript files can be parsed, minimized and combined into one single file. This reduces the server requests, loading time and minimizes the traffic. In addition, the generated HTML source code can be minimized and all generated files can be loaded over a cookieless domain (domain sharding).

Information

Table of content

Installation

  1. Copy the files for this module to /site/modules/AllInOneMinify/
  2. In admin: Modules > Check for new modules.
  3. Install Module "AIOM+ (All In One Minify) for CSS, LESS, JS and HTML".

Alternative in ProcessWire 2.4

  1. Login to PW backend and go to Modules
  2. Click tab "new" and enter Module Class Name: "AllInOneMinify"
  3. Click "Download and Install"

Minimize Stylesheets and parse LESS files

Minimization of a single file.

<!-- CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="https://github.com/flipzoom/ProcessWire-AIOM-All-In-One-Minify/blob/AIOM+/<?php echo AllInOneMinify::CSS('css/stylesheet.css'); ?>">

<!-- LESS file -->
<link rel="stylesheet" type="text/css" href="https://github.com/flipzoom/ProcessWire-AIOM-All-In-One-Minify/blob/AIOM+/<?php echo AllInOneMinify::CSS('css/stylesheet.less'); ?>">

Minimize multiple files into one file. You can even mix stylesheet and LESS files in parsing and combining process!

<link rel="stylesheet" href="https://github.com/flipzoom/ProcessWire-AIOM-All-In-One-Minify/blob/AIOM+/<?php echo AllInOneMinify::CSS(array('css/file-1.css', 'css/file-2.less', 'css/file-3.css', 'css/file-4.less')); ?>">

Tip: You can also use the short syntax "AIOM". For example, AIOM::CSS().

LESS variables access in multiple files

You have a LESS file in which you are defining, for example, all colors and another LESS file that defines the actual layout? Now you need in the layout LESS file access to the variables of the color LESS file? It's easier than you think. Through a simple referencing of source LESS file. For example: 

<link rel="stylesheet" type="text/css" href="https://github.com/flipzoom/ProcessWire-AIOM-All-In-One-Minify/blob/AIOM+/<?php echo AllInOneMinify::CSS('css/color.less'); ?>">
...
<link rel="stylesheet" type="text/css" href="https://github.com/flipzoom/ProcessWire-AIOM-All-In-One-Minify/blob/AIOM+/<?php echo AllInOneMinify::CSS('css/layout.less'); ?>">

Example content of color.less

@my-color: #ff0000;

Example content of layout.less

@import (reference) "css/color.less";

body {
    background-color: @my-color;
}

That's all. Pretty, hu? The full documentation of LESS you can find at: www.lesscss.org

Minimize Javascripts

Minimization of a single file.

<script src="https://github.com/flipzoom/ProcessWire-AIOM-All-In-One-Minify/raw/AIOM+/<?php echo AllInOneMinify::JS('js/javascript.js'); ?>"></script>

Minimize multiple files into one file.

<script src="https://github.com/flipzoom/ProcessWire-AIOM-All-In-One-Minify/raw/AIOM+/<?php echo AllInOneMinify::JS(array('js/file-1.js', 'js/file-2.js', 'js/file-3.js', 'js/file-4.js')); ?>"></script>

Tip: You can also use the short syntax "AIOM". For example, AIOM::JS().

Conditional loading

Since AIOM+ version 3.1.1 javascripts, stylesheets and LESS files can be loaded based on a API selector. Here is an example of conditional loading: 

<?php $stylesheets  = array('css/reset.css',
                            'css/main.less',
                            array('loadOn'  => 'id|template=1002|1004|sitemap', 
                                  'files'   => array('css/special.css', 'css/special-theme.less'))); ?>

<link rel="stylesheet" type="text/css" href="https://github.com/flipzoom/ProcessWire-AIOM-All-In-One-Minify/blob/AIOM+/<?php echo AllInOneMinify::CSS($stylesheets); ?>" />

The same you can do with AIOM::JS(). loadOn must be an ProcessWire API selector.

Directory Traversal Filter

By default, only files can be included, which are in ProcessWire template folder. If you wish to add files outside that folder, you have to activate the backend "Allow Directory Traversal" option. Then you can jump back in the path. For example: 

AIOM::CSS('../third-party-packages/package/css/example.css');

All paths are still automatically corrected!

Already minimized files no longer minimized

To further enhance the performance and to give you maximum flexibility in the combining process, you now have the option to exclude certain files from the minimization (since version 2.2). All files that have the abbreviation ".min" or "-min" at the end of the file name and before the file extension, are no longer minimized. For example: file-1.js is minimized. file-1-min.js or file-1.min.js is not minimized. The same for CSS. file-1.css is minimized. file-1-min.css or file-1.min.css is not minimized.

Exemplary template structure

site/
    templates/
        css/
        js/

Minimize HTML

The generated HTML source code is automatically minimized when rendering. This requires no change to the templates. Conditional Comments, textareas, code tags, etc. are excluded from the minimization.

NOTE: AIOM+ removes all whitespaces between two tags. If you explicitly need a whitespace, change the whitespace into an HTML entity: &nbsp;. See (#6)

Development mode

If you are currently in development of the site, caching can be a problem. For this, you can enable the development mode since version 1.1.0 in the Backend (Module > AIOM > Config). The files will be combined, but not minimized and re-generated at each call. In addition, a no-cache GET parameter is appended with a timestamp to prevent the browser caching. For example: css_031ea978b0e6486c828ba444c6297ca5_dev.css?no-cache=1335939007

Changelog

3.2.3

3.2.2

3.2.1

3.2

3.1.5

3.1.4

3.1.3

3.1.2

3.1.1

3.0.1

3.0.0

2.2.2

2.2.1

2.2.0

2.1.1

2.1.0

2.0.0

1.1.1

1.1.0

1.0.0

Questions or comments?

For any questions, suggestions or bugs please create a ticket on GitHub.

Old stable Version needed?

Under the following link you can find the old stable version of AIOM without LESS support: https://github.com/conclurer/ProcessWire-AIOM-All-In-One-Minify/tree/AIOM-(old-Stable-2.2.2)

Analytics