Jump to content

Module: AIOM+ (All In One Minify) for CSS, LESS, JS and HTML


David Karich

Recommended Posts

Hey guys, 

first, ProcessWire is a great piece of software. Thanks for that and the great community behind that. So, i'm realy new to ProcessWire, but i will present you my first module for SEO- and performance optimizing: AIOM+ (All In One Minify).

AIOM+ (All In One Minify) for CSS, LESS, JS and HTML

AIOM+ (All In One Minify) is a 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).

Install AIOM+

  1. Download current release (link below)
  2. Extract and copy the files for this module to /site/modules/AllInOneMinify/
  3. Login to PW backend and go to Modules > Check for new modules
  4. 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"

Features

  • Combining stylesheets / LESS files or JavaScripts
  • Minimize the combined files
  • No change to the .htaccess necessary (except for the domain sharding)
  • Server-side LESS parsing without plugins
  • HTML source code minimization
  • Cookieless domain / domain sharding
  • Automatic cache management (With changes to the source file, the cache is rebuilt)
  • Configurable via the backend
  • Automatic rewriting the paths in the stylesheet and LESS files. No changes are needed
  • Optional developer mode (combining, but no minimize and browser cache prevention)
  • Clear the cache on the backend
  • Conditional loading for CSS, LESS and JS (since Version 3.1.1)

How to use

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

<link rel="stylesheet" href="<?php echo AIOM::CSS(array('css/file-1.css', 'css/file-2.less', 'css/file-3.css', 'css/file-4.less')); ?>"> 

Minimize multiple javascript files into one file.

<script src="<?php echo AIOM::JS(array('js/file-1.js', 'js/file-2.js', 'js/file-3.js', 'js/file-4.js')); ?>"></script>

Conditional loading (same with Javascripts)

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

<link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS($stylesheets); ?>" /> 

More Information, Documentation and Download

So, I hope you can do something with this module. :)

Dave

post-1973-0-08441200-1393031073_thumb.pn

  • Like 26
Link to comment
Share on other sites

Welcome to processwire cmp* and the forum David. And thanks for making your aiom+ module.

Looking at that module you must already be an experienced coder and so you don't need much

introduction to the how's and what's. But maybe you still may find something usefull in this channel:

http://processwire.com/talk/topic/4173-grouped-forum-posts-links-articles-tutorials-code-snippets/

(* = content management potential)

Link to comment
Share on other sites

I really like all the minify and less support. Actually I use the Spex-Module from Jonathan. With the next project I want to use AIOM+.

Looks good. I really like the idea of domain sharding built in.

 
Only one question for me is if it is an improvement to use domain sharding today. Before 2010, max 2 simultaneous connections was allowed. Today 6-8 are allowed/used. Without images you may need 1 html + 1 css + 1 js + 1 optional for Fonts = 4
 
related article: http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/

Link to comment
Share on other sites

Yep, easily one of the most useful PW modules around. It fits great into my workflow, and now with version 3.0 and the added LESS support it gets even better. Keep up the good work!

PS Have you guys considered adding Autoprefixer support to the module (maybe as an option)? I'm not sure if this is easy to implement but it saves people the hassle of writing all kinds of vendor prefixes in their CSS, and instead just automatically takes care of this.

  • Like 2
Link to comment
Share on other sites

Thank you guys, for this great feedback. That make me happy. :)

Yep, easily one of the most useful PW modules around. It fits great into my workflow, and now with version 3.0 and the added LESS support it gets even better. Keep up the good work!

PS Have you guys considered adding Autoprefixer support to the module (maybe as an option)? I'm not sure if this is easy to implement but it saves people the hassle of writing all kinds of vendor prefixes in their CSS, and instead just automatically takes care of this.

I do not think it's the best way, to integrate Autoprefixer in AIOM+. I think it's not good when the module changes the generated code, which can be difficult to understand. Makes it difficult for the troubleshooting. But I'll be looking at Autoprefixer. Maybe I can port the code to PHP.

Currently i use LESS for that: 

.transition(@style) {
    -webkit-transition: @style;
    -moz-transition: @style;
    -o-transition: @style;
    -ms-transition: @style;
    transition: @style;
}

#element {
    .transition(all 0.2s ease);
}

Thank you very much for the module, it is one of my favorites. I have started a topic on github suggesting the use of conditional loading for files using the ID of the page.

I did not know existed the PHP official version of LESS, although I had already used to using koala (http://koala-app.com/) :)

Excellent suggestion! I'm still thinking about the syntax, but definitely write this function on the To-Do. Thank you.

Link to comment
Share on other sites

I really like all the minify and less support. Actually I use the Spex-Module from Jonathan. With the next project I want to use AIOM+.

Only one question for me is if it is an improvement to use domain sharding today. Before 2010, max 2 simultaneous connections was allowed. Today 6-8 are allowed/used. Without images you may need 1 html + 1 css + 1 js + 1 optional for Fonts = 4

related article: http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/

I think for websites and applications that are designed for desktop systems, domain sharding is still acute and helpful. For mobile-optimized sites, it is counterproductive. 
 
The DNS overhead, is however, in my experience, not in comparison with the cookie data. For large news portals I continued domain sharding in use.
  • Like 1
Link to comment
Share on other sites

AIOM+ now in Version 3.0.1 with a little but recommended fix in the Less parser. If a large LESS file is split by the parser, the following error occurs: 

Error: Class 'Less_Exception_Parser' not found (line 8795 of /site/modules/AllInOneMinify/lib/Less/Less.php)

Issue found and submited by Ryan Pierce. Thanks.

Link to comment
Share on other sites

Hey David, really like AIOM. I would usually use Assetic for that, and I think you might want to look at integrating that code. Could save you a few headaches.  :)

Hey Pierre, 

I'm not really happy with Assetic for several reasons: 

  • Too many dependencies.
  • Java-based YUI integeration. Many shared hosting do not offer Java support.
  • Depending on the Google Closure API. I don't wanted to integrate any third party service.
  • Node.js for LESS parser, because the PHP-ported version in Asettic is outdated and is no longer developed and supported.

In summary, you could not just use AIOM+ as it is now – install and use. AIOM+ requires only PHP and is not dependent on another service or special server requirements. :)

  • Like 1
Link to comment
Share on other sites

So, just before the weekend, I've uploaded a new version (3.1.1) that supports a new feature: Conditional loading. You can now assign CSS, LESS or JS files with an API-selector a condition at which they should be loaded. For example: 

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

<link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS($stylesheets); ?>" /> 
  • Like 10
Link to comment
Share on other sites

Hi, one quick question: Is there a way to set it up that it cleans the HTML but leaves the line breaks intact?

So I see a clean, neat website source code without spaces and comments but the code is not squeezed into one single endless line?

Link to comment
Share on other sites

Hi, one quick question: Is there a way to set it up that it cleans the HTML but leaves the line breaks intact?

So I see a clean, neat website source code without spaces and comments but the code is not squeezed into one single endless line?

Doesn't this kind of defeat the purpose of minimizing your html? If you want to look at nicely formatted source every browser nowadays has a good or decent devtools/inspector.

  • Like 2
Link to comment
Share on other sites

I do not think those extra few carriage returns matter too much.

Planning the "presentation" of source code is for psychological reasons: e.g. if 3rd parties (clients?) look at the code.

So, the "purpose" of minimizing html may vary from user to user. :-)

Link to comment
Share on other sites

What's stopping a client from opening devtools? If clients care enough to look at source code and actually base an opinion (negative or positive) on that, i think they are well aware of optimizations like minimize and they actually applaud you for that, or you could tell them: "we minimize (and concatenate) the output for optimal performance, especially on mobile". Keeping cr/lf in there seems an in-between, for no real reason. To me minimize means minimize, but to each it's own i guess.

  • Like 3
Link to comment
Share on other sites

Hi, one quick question: Is there a way to set it up that it cleans the HTML but leaves the line breaks intact?

So I see a clean, neat website source code without spaces and comments but the code is not squeezed into one single endless line?

Hi ceberlin, 
 
no, there is no option, because this ist not the target of a minimization. Every browser has an inspector or dev-tools in which you or your client can see the restructured DOM.
Link to comment
Share on other sites

Hi David,

I've been playing around with bower to manage third party libraries, bower puts files in a directory called bower_components and my first instinct was to put that directory right in "site/". In _getFileInfoArray any attempt to reference a file outside the templates directory gets thwarted, is there a security concern here?

Link to comment
Share on other sites

I read the module description and it looks like a great minify solution! Is there an overhead because of caching and cache rebuild? For example with a slow first page load or will the cache created prior to the first visitor? How do you monitor file changes?

I'll try AIOM+ soon to minify html, css and js with a new PW website :)

Link to comment
Share on other sites

Hi David,

I've been playing around with bower to manage third party libraries, bower puts files in a directory called bower_components and my first instinct was to put that directory right in "site/". In _getFileInfoArray any attempt to reference a file outside the templates directory gets thwarted, is there a security concern here?

Hi Jonathan , 

yes, in this function paths are filtered to prevent directory traversal attacks. AIOM+ loads only allowed files that are located in the template folder. I think about it, in one of the upcoming versions, introduce a whitelist for asset folder.

For a workaround change the following line (749) in AllInOneMinify.module

$_path  = str_ireplace(array('../', './', '%2e%2e%2f', '..%2F'), '', (wire('config')->paths->templates.$_file));

to 

$_path  = wire('config')->paths->templates.$_file; 

I have not tested it and I can not recommend it too.

  • Like 1
Link to comment
Share on other sites

I read the module description and it looks like a great minify solution! Is there an overhead because of caching and cache rebuild? For example with a slow first page load or will the cache created prior to the first visitor? How do you monitor file changes?

I'll try AIOM+ soon to minify html, css and js with a new PW website :)

Hi pwFoo, 

AIOM+ monitors each asset file on the modifikation time and generates a hash for the comparsion with the already cached files. If there exist no cached file, the first function call will trigger that process, but only for files, that are needed (first page load). The average overhead of an average webproject on shared hosting with 128 MB php_memory_limit are round 500 ms for generating, minimization, parsing and writing the cached files. That's at least my experience. The complete Bootstrap 3 source as LESS files is generated in under 3 seconds.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By monollonom
      (once again I was surprised to see a work of mine pop up in the newsletter, this time without even listing the module on PW modules website 😅. Thx @teppo !)
      FieldtypeQRCode
      Github: https://github.com/romaincazier/FieldtypeQRCode
      Modules directory: https://processwire.com/modules/fieldtype-qrcode/
      A simple fieldtype generating a QR Code from the public URL of the page, and more.
      Using the PHP library QR Code Generator by Kazuhiko Arase.

      Options
      In the field’s Details tab you can change between .gif or .svg formats. If you select .svg you will have the option to directly output the markup instead of a base64 image. SVG is the default.
      You can also change what is used to generate the QR code and even have several sources. The accepted sources (separated by a comma) are: httpUrl, editUrl, or the name of any text/URL/file/image field.
      If LanguageSupport is installed the compatible sources (httpUrl, text field, ...) will return as many QR codes as there are languages. Note however that when outputting on the front-end, only the languages visible to the user will be generated.
      Formatting
      Unformatted value
      When using $page->getUnformatted("qrcode_field") it returns an array with the following structure:
      [ [ "label" => string, // label used in the admin "qr" => string, // the qrcode image "source" => string, // the source, as defined in the configuration "text" => string // and the text used to generate the qrcode ], ... ] Formatted value
      The formatted value is an <img>/<svg> (or several right next to each other). There is no other markup.
      Should you need the same markup as in the admin you could use:
      $field = $fields->get("qrcode_field"); $field->type->markupValue($page, $field, $page->getUnformatted("qrcode_field")); But it’s a bit cumbersome, plus you need to import the FieldtypeQRCode's css/js. Best is to make your own markup using the unformatted value.
      Static QR code generator
      You can call FieldtypeQRCode::generateQRCode to generate any QR code you want. Its arguments are:
      string $text bool $svg Generate the QR code as svg instead of gif ? (default=true) bool $markup If svg, output its markup instead of a base64 ? (default=false) Hooks
      Please have a look at the source code for more details about the hookable functions.
      Examples
      $wire->addHookAfter("FieldtypeQRCode::getQRText", function($event) { $page = $event->arguments("page"); $event->return = $page->title; // or could be: $event->return = "Your custom text"; }) $wire->addHookAfter("FieldtypeQRCode::generateQRCodes", function($event) { $qrcodes = $event->return; // keep everything except the QR codes generated from editUrl foreach($qrcodes as $key => &$qrcode) { if($qrcode["source"] === "editUrl") { unset($qrcodes[$key]); } } unset($qrcode); $event->return = $qrcodes; })
    • By Sebi
      AppApiFile adds the /file endpoint to the AppApi routes definition. Makes it possible to query files via the api. 
      This module relies on the base module AppApi, which must be installed before AppApiFile can do its work.
      Features
      You can access all files that are uploaded at any ProcessWire page. Call api/file/route/in/pagetree?file=test.jpg to access a page via its route in the page tree. Alternatively you can call api/file/4242?file=test.jpg (e.g.,) to access a page by its id. The module will make sure that the page is accessible by the active user.
      The GET-param "file" defines the basename of the file which you want to get.
      The following GET-params (optional) can be used to manipulate an image:
      width height maxwidth maxheight cropX cropY Use GET-Param format=base64 to receive the file in base64 format.
    • By MarkE
      This fieldtype and inputfield bundle was built for storing measurement values within a field, rendering them in a variety of formats and converting them to other units or otherwise modifying them via the API.
      The API consists of a number of predefined functions, some of which include...
      render() for rendering the measurement object, valueAs() for converting the value to another unit value, convertTo() for converting the whole measurement object to different units, and add() and subtract() for for modifying the stored value by the value (converted as required) in another measurement. In the admin the inputfield includes a checkbox (which can be optionally disabled) for converting values on page save. For an example if a value was typed in as centimeters, the unit was changed to metres, and the page saved with this checkbox selected, said value would be automatically converted so that e.g. 170 cm becomes 1.7 m.

      A simple length field using Fieldtype Measurement and Inputfield Measurement.
      Combination units (e.g. feet and inches) are also supported.
      Please note that this module is 'proof of concept' at the moment - there are limited units available and quite a lot of code tidying to do. More units will be added shortly.
      See the GitHub at https://github.com/MetaTunes/FieldtypeMeasurement for full details and updates.
    • By tcnet
      File Manager for ProcessWire is a module to manager files and folders from the CMS backend. It supports creating, deleting, renaming, packing, unpacking, uploading, downloading and editing of files and folders. The integrated code editor ACE supports highlighting of all common programming languages.
      https://github.com/techcnet/ProcessFileManager

      Warning
      This module is probably the most powerful module. You might destroy your processwire installation if you don't exactly know what you doing. Be careful and use it at your own risk!
      ACE code editor
      This module uses ACE code editor available from: https://github.com/ajaxorg/ace

      Dragscroll
      This module uses the JavaScript dragscroll available from: http://github.com/asvd/dragscroll. Dragscroll adds the ability to drag the table horizontally with the mouse pointer.
      PHP File Manager
      This module uses a modified version of PHP File Manager available from: https://github.com/alexantr/filemanager
       
    • By tcnet
      This module implements the website live chat service from tawk.to. Actually the module doesn't have to do much. It just need to inserted a few lines of JavaScript just before the closing body tag </body> on each side. However, the module offers additional options to display the widget only on certain pages.
      Create an account
      Visit https://www.tawk.to and create an account. It's free! At some point you will reach a page where you can copy the required JavaScript-code.

      Open the module settings and paste the JavaScript-code into the field as shown below. Click "Submit" and that's all.

      Open the module settings
      The settings for this module are located int the menu Modules=>Configure=>LiveChatTawkTo.

       
×
×
  • Create New...