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

[SteveB]

A workaround for Issue #30 - CSS urls when PW installed in subdirectory

// ------------------------------------------------------------------------
// Load source of file and rewrite absolute URLs.
// ------------------------------------------------------------------------
$_css_src   = file_get_contents($stylesheet['absolute_path']).PHP_EOL;
$_css_src = (!empty($_css_src)) ? Minify_CSS_UriRewriter::rewrite($_css_src, dirname($stylesheet['absolute_path']),wire('config')->paths->root) : $_css_src;

//SB: My fix for issue #30 about paths in css image urls. Compatible with Soma's fix for #20 in which you specify the path in css file starting with /site.  
//Issue 30: When pw is installed in a subdirectory aiom omits the subdirectory from paths it makes for css image urls.
//Allows dev site's pw to be in doc root and deployed site's pw to be in subfolder (or the other way around) and have same css work on both.  
//1. Specify image urls in css without any path (e.g. background:url(T-on75.jpg))
//2. Put the images in templates/styles/    
$rel = str_replace($_SERVER['DOCUMENT_ROOT'], '', wire('config')->paths->templates);	//relative path to templates from doc root. Maybe /subfolder/site/templates 
$_css_src = str_replace('url(/site/templates/styles/', 'url(' . $rel . 'styles/', $_css_src);	//processed url: /subfolder/site/templates/styles/T-off75.jpg

I'm using this on AIOM 3.1.4b with the following...

https://github.com/conclurer/ProcessWire-AIOM-All-In-One-Minify/issues/17#issuecomment-47402040 (My change to _getCacheName)

https://github.com/conclurer/ProcessWire-AIOM-All-In-One-Minify/issues/20#issue-40582619 (Soma's fix mentioned above)

I use this in my template files so urls in $config->styles pointing to hosted libraries are not messed with:

foreach ($config->styles->unique() as $path){
     if(preg_match('#^'.$config->urls->templates.'styles(.*)#',$path,$m)) $path = AIOM::CSS('styles'.$m[1]);
     echo "     <link rel='stylesheet' type='text/css' href='$path' />\n";
}

Enjoy!

[MadHatter]

Hi,

I have ProcessWire set up in a directory in my localhost, and when I check the Minified CSS the URLs for backgroun images are incorrect (it is ignoring the path to the proceswire root). Is there an option somewhere I can use to either stop AIOM modifying the paths or to prepend the paths with the correct path to ProcessWire?

Thanks,

MadHatter

[Stikki]

A workaround for Issue #30 - CSS urls when PW installed in subdirectory

// ------------------------------------------------------------------------
// Load source of file and rewrite absolute URLs.
// ------------------------------------------------------------------------
$_css_src   = file_get_contents($stylesheet['absolute_path']).PHP_EOL;
$_css_src = (!empty($_css_src)) ? Minify_CSS_UriRewriter::rewrite($_css_src, dirname($stylesheet['absolute_path']),wire('config')->paths->root) : $_css_src;

//SB: My fix for issue #30 about paths in css image urls. Compatible with Soma's fix for #20 in which you specify the path in css file starting with /site.  
//Issue 30: When pw is installed in a subdirectory aiom omits the subdirectory from paths it makes for css image urls.
//Allows dev site's pw to be in doc root and deployed site's pw to be in subfolder (or the other way around) and have same css work on both.  
//1. Specify image urls in css without any path (e.g. background:url(T-on75.jpg))
//2. Put the images in templates/styles/    
$rel = str_replace($_SERVER['DOCUMENT_ROOT'], '', wire('config')->paths->templates);	//relative path to templates from doc root. Maybe /subfolder/site/templates 
$_css_src = str_replace('url(/site/templates/styles/', 'url(' . $rel . 'styles/', $_css_src);	//processed url: /subfolder/site/templates/styles/T-off75.jpg

I'm using this on AIOM 3.1.4b with the following...

https://github.com/conclurer/ProcessWire-AIOM-All-In-One-Minify/issues/17#issuecomment-47402040 (My change to _getCacheName)

https://github.com/conclurer/ProcessWire-AIOM-All-In-One-Minify/issues/20#issue-40582619 (Soma's fix mentioned above)

I use this in my template files so urls in $config->styles pointing to hosted libraries are not messed with:

foreach ($config->styles->unique() as $path){
     if(preg_match('#^'.$config->urls->templates.'styles(.*)#',$path,$m)) $path = AIOM::CSS('styles'.$m[1]);
     echo "     <link rel='stylesheet' type='text/css' href='$path' />\n";
}

Enjoy!

More elegant way to fix this is simply remove wire document root assumption and expect real DOCUMENT_ROOT to be replaced with Minify_CSS_UriRewriter::rewrite() method.

So simply:

Line 590:

$_css_src = (!empty($_css_src)) ? Minify_CSS_UriRewriter::rewrite($_css_src, dirname($stylesheet['absolute_path']),wire('config')->paths->root) : $_css_src;

To:

$_css_src = (!empty($_css_src)) ? Minify_CSS_UriRewriter::rewrite($_css_src, dirname($stylesheet['absolute_path'])) : $_css_src;

Fixes this issue, and all URL rewrites are done from DOCUMENT_ROOT instead of wire root

[SteveB]

He's right. It's working for me in my application. Thanks Stikki.

[MikeB]

Thanks @Stikki that worked for me.

[Craig]

I've encountered an interesting problem when using AIOM recently - but also have a potential fix, so it's not all bad. Here's the information!

I am using separate IE and non-IE stylesheets, with each loaded via conditional comments in the markup.

There are two arrays for the files:

$config->css->all = array(
'css/pure-min.css',
'css/grids-responsive-min.css',
'css/fa/css/font-awesome.min.css',
'css/cds-all.css',
);
 
$config->css->oldie = array(
'css/pure-min.css',
'css/grids-responsive-old-ie-min.css',
'css/fa/css/font-awesome.min.css',
'css/cds-oldie.css',
);

These get minified in the template:

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS($config->css->oldie); ?>">
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS($config->css->all); ?>">
<!--<![endif]-->

That is all great. The problem arises when the source files all have the same modification time - which it does on the live environment of this website, and when using an automated deployment service.

Because each list of files has the same number of files, and the files have the same modification time, the generated cache name is always the same, and one overwrites the other.

My fix was to include the file's paths when generating the cache name in _getCacheName:

foreach ($files as $file) {
    $_timestamp .= $file['absolute_path'] . $file['last_modified'];
}

I'm more than happy to create a pull request on GitHub for this, but thought it'd be worth mentioning/discussing first

[SteveB]

Craig, have a look at: https://github.com/conclurer/ProcessWire-AIOM-All-In-One-Minify/issues/17#issuecomment-47402040

[artamteex]

This unfortunately doesn't work for me - leaves me with empty css.

My PW is installed in subdirectory. Stikki fix was there already. Does any of you know what might be happening?

(I'm no a good coder)

 

[hwmaier]

The seems to be a bug with the CSS compression.

#nav :hover{}

becomes when compressed:

 #nav:hover{}

The blank should not be removed as it is a separator between a parent and a child element and removing it changes the cascade!

The the first rule identifies a child element of a #nav element which is hovered over like the anchor link in this HTML snippet:

<div id="nav"><a href="/">I am a hovering child element</a><div>  

and the latter identifies just the #nav element itself which is hovered over like:

<div id="nav"> I am a hovering parent element. My children don't matter. <div>  

As a consequence this bug breaks CSS based menus.

[hwmaier]

The CSS compression bug I described in my earlier post has been fixed in AIOM version 3.2.

[Marvin Scharle]

The CSS compression bug I described in my earlier post has been fixed in AIOM version 3.2.

As you can see, we've updated AIOM to version 3.2. In this version we shift from the current CSS compressor to YUI, which should solve multiple CSS-related bugs.

This unfortunately doesn't work for me - leaves me with empty css.

My PW is installed in subdirectory. Stikki fix was there already. Does any of you know what might be happening?

(I'm no a good coder)

Can you please verify if the bug is still present in AIOM 3.2? An empty CSS file sounds for me like a problem with your CSS code...

[artamteex]

Can you please verify if the bug is still present in AIOM 3.2? An empty CSS file sounds for me like a problem with your CSS code...

Unfortunately it still doesn't work. CSS files come directly from webflow.com export. Maybe I'm messing something up, but there is no too many possibilities to make a mess with. I copy this the line below and change file names. My css files are also in css folder. Don't know what's wrong.

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

Should filename change after emptying the cache? Mine stays the same: css_d41d8cd98f00b204e9800998ecf8427e.css. It's probably stupid question, but I want to be sure - does it assume that the css folder is in templates folder?

[Marvin Scharle]

Hello artamteex,

Yes, AIOM assumes that the CSS files are inside the templates folder. Take a look in the manual: "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."

[Soma]

Please make it a possible for absolute path from root. That traversal back with ../../ is not very convenient at all. I have a fork I'm using ever since where I changed it to allow for files outside templates folder using root path.

It's an assumption that shouldnt be made in th first place. The hx

[Marvin Scharle]

Please make it a possible for absolute path from root. That traversal back with ../../ is not very convenient at all. I have a fork I'm using ever since where I changed it to allow for files outside templates folder using root path.

Hi Soma,

I totally agree with you. Currently, It is possible to use absolute paths using the $config->scripts and $config->styles arrays (see: https://github.com/conclurer/ProcessWire-AIOM-All-In-One-Minify/issues/20).

We are planning to change the behavior of AIOM in AIOM 4. 

Thanks in advance!

Marvin

[Soma]

I don't recommend using the config->scripts that core uses. Cause if you use form API or others core modules on front end you will end up having scripts in there you don't want.

[hwmaier]

I don't recommend using the config->scripts that core uses. Cause if you use form API or others core modules on front end you will end up having scripts in there you don't want.

I thought that $config->styles and $config->scripts are the official containers for gathering and collecting scripts and CSS for frontend output.

On https://processwire.com/api/variables/config/ it says " Feel free to use it for the same purpose in your own sites.".

Maybe I mistunderstood something here and if there are issues with this approach or it is not recomended this probably should be spelled out in the documentation.

[Soma]

I thought that $config->styles and $config->scripts are the official containers for gathering and collecting scripts and CSS for frontend output.

On https://processwire.com/api/variables/config/ it says " Feel free to use it for the same purpose in your own sites.".

Maybe I mistunderstood something here and if there are issues with this approach or it is not recomended this probably should be spelled out in the documentation.

It can be used, just what do you do if you have files in there that come from core modules you don't want? When using form API on front-end and load a Datetime field, css and js from that Inputfield will get added to the array, but I don't like to use backend scripts in the front-end. You add another dependency, that if core changes or has a bug you also have that on front-end after update. You have already have to take care of changed to Inputfields anyway so maybe it's no big deal. Also has cases where third party autoload modules added scripts or css to the array and it may cause troubles.

All that led me to create my own  file array for front-end.

$config->siteScripts = new FilenameArray();
$config->siteStyles = new FilenameArray();

Now that isn't something other front-end module know of so maybe it again isn't good regarding that, where the core $config->scripts could give a standard, so third party front-end modules could rely on. I just don't think mixing them isn't very nice.

[Marvin Scharle]

All that led me to create my own  file array for front-end.

$config->siteScripts = new FilenameArray();
$config->siteStyles = new FilenameArray();

Now that isn't something other front-end module know of so maybe it again isn't good regarding that, where the core $config->scripts could give a standard, so third party front-end modules could rely on. I just don't think mixing them isn't very nice.

You can pass any FilenameArray to AIOM starting on version 3.2.

I know, this solution is not optimal but it is our solves the given problem of artamteex.

[adrian]

Not sure if this is a new bug or not - I haven't seen it on other sites, but I just installed it on a new site and with HTML minify turned on, certain spaces are being removed. This works as expected:

<strong>Lesson Rating: </strong>Excellent

But if the code is generated like this, the space between ":" and "Excellent" is removed:

<strong>Lesson Rating:</strong> Excellent

[Rajesh Khanna]

                   I have used AIOM on all website which have been developed by us on processwire. Recently one of our site started to throw error and it was working fine tilll few days ago.Error is

                  " Error:     Exception: The combined js file can not be written. Check if the script has sufficient permissions ".

                   We tried allowing the module  permission with 777 and also changed the permission in the config file and have failed.AIOM is able to create file but is not able to write anything in that file.

                   We are using AIOM version 3.2.1 on Processwire 2.5.3.

                  

Thanks

[mr-fan]

Just make some steps with AIOM and have a strange issue:

CSS works fine but with the JS files on a quick and dirty try it seems that the exact same scripts won't work with AIOM and with single loading the do....

Q&D Code below:

<!-- jQuery -->
<!--<script src="
<?php
	//echo AIOM::JS(
				//  array(
				//		'tpl/js/jquery.js',
				//		'tpl/js/bootstrap.min.js',
				//		'tpl/js/owl-carousel/owl.carousel.min.js',
				//		'tpl/js/easytabs/easyResponsiveTabs.js',
				//		'tpl/js/jquery.easing.min.js',
				//		'tpl/js/flex-slider/jquery.flexslider.js',
				//		'tpl/js/jquery.appear.js',
				//		'tpl/js/jquery.inview.js',
				//		'tpl/js/jquery.prettyphoto.js',
				//		'tpl/js/jquery.nicescroll.js',
				//		'tpl/js/main.js'
				//		));
	?>
"></script>-->

<script src="<?php echo $config->urls->templates?>tpl/js/jquery.js"></script>
<script src="<?php echo $config->urls->templates?>tpl/js/bootstrap.min.js"></script>
<script src="<?php echo $config->urls->templates?>tpl/js/owl-carousel/owl.carousel.min.js"></script>
<script src="<?php echo $config->urls->templates?>tpl/js/jquery.easing.min.js"></script>
<script src="<?php echo $config->urls->templates?>tpl/js/flex-slider/jquery.flexslider.js"></script>
<script src="<?php echo $config->urls->templates?>tpl/js/jquery.inview.js"></script>
<script src="<?php echo $config->urls->templates?>tpl/js/jquery.prettyphoto.js"></script>
<script src="<?php echo $config->urls->templates?>tpl/js/jquery.nicescroll.js"></script>
<script src="<?php echo $config->urls->templates?>tpl/js/main.js"></script>

Before posting i've checked the created files for shure.

all code seems to be there - disabled minifying in AIOM only take the files together...??

[Macrura]

@mr-fan - what problem are you seeing? does the minified file have any byte order marks? you might need to check the encoding of the js files, or zap gremlins

[mr-fan]

Thanks it's working perfect now...like you thought...some codecleaning get it working.

On this project i'm working with a paid themeforrest html template that fits to the client - but on such themes there are almost many things to improve exspecially some overloaded usage of scripts and plugins on such themes...so i've tidy up first and the compress and minify.

regards mr-fan

[horst]

Is it possible to exclude pages from the HTML-minifying per template?