Experimental snippet - Minify CSS and JS and combine to single files

[Ruud]

A nice experimental snippet that will allow you to combine all CSS and Javascript (even external) into single files, combined and minified for high speed websites.
Warning: This module is meant for experienced users only, many issues are to be expected.

Short example:

Setup css

Code: [Select]

<?php
$css[] = "css/bootstrap.min.css";
$css[] = "css/font-awesome.css";
$css[] = "css/custom.css";
$css[] = "css/fancybox/jquery.fancybox-1.3.4.css";
$css[] = 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700';
?>Create and output css

Code: [Select]

<?php minify_css(); ?>

Setup javascript

Code: [Select]

<?php
$js[] = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
$js[] = "js/bootstrap.min.js";
$js[] = "js/skrollr.min.js";
$js[] = "fancybox/jquery.fancybox-1.3.4.pack.js";
?>Create and output javascript

Code: [Select]

<?php minify_js(); ?>
More info and download on: https://dev4me.com/modules-snippets/experimenteel/minify/

[dbs]

Hi Ruud, something like this is very welcome. 
Will test it in the next days.

[dbs]

Hi, a local test was not successful. The minified.css contains Windows pathes.
Could be a problem with LibraryAdmin.

A online test (without lIbraryAdmin, SP7, PHP7.0.23) has worked with 50%. Not all given files was included. Later changes of pathes are ignored. Or the ?force don't work. At the momet minified.css/js will not updated and not new created (after removing). Maybe my webspace has a problem.

I should test it on other installations.

[Ruud]

Note that ?force (or CTRL-F5) will only work when you are a logged-in user!
For normal users (not logged in) a session variable is used that will do the check for changes (or missing minified.css/js) only once.

All of this is done to prevent the snippet to check all files on every page load in production websites.
So when you are testing, make sure you ar logged-in.

[Ruud]

Hi, a local test was not successful. The minified.css contains Windows pathes.
Could be a problem with LibraryAdmin.

There should never be windows paths in CSS. It would always mean they are local files!!!

[dbs]

Note that ?force (or CTRL-F5) will only work when you are a logged-in user!

I was sure i'm logged in. Wrong tought.
Now it is ok online.

miniform frontend.css and OFA frontend.js will loaded extra. They are to late for your script?

[Ruud]

miniform frontend.css and OFA frontend.js will loaded extra. They are to late for your script?

Did you remove the register_frontend_modfiles('css'); and register_frontend_modfiles('js'); from the template?

[dbs]

Yes, was removed.
Miniform is included with droplet sectionpicker.

[crnogorac081]

Cool.

I needed something like thus for backend

[crnogorac081]

Ruud,

Code: [Select]

$css[] = "css/bootstrap.min.css";

is this considered to be TEMPLATE_URL/  css/bootstrap.min.css ??

cheers

[Ruud]

is this considered to be TEMPLATE_URL/  css/bootstrap.min.css ??

Yes,
The procedures are:

Code: [Select]

<?php
$css[] = "css/bootstrap.min.css";     // Relative to TEMPLATE_DIR
$css[] = "/modules/mymodule/plugin/mymodule.css";     // if the file exists it is used, else WB_PATH is added 
$css[] = "//somewebsite.com/somecss.css";     // External file, HTTPS is assumed
$css[] = "http://somewebsite.com/somecss.css";     // External file, HTTP
$css[] = "https://somewebsite.com/somecss.css";     // External file, HTTPS
Non existing local files are silently skipped.

(the same rules are valid for the javascripts)

[crnogorac081]

Tips:

I dont know why but minify.css is making empty file.. .js file is ok.

Ruud,

Sometimes minify.css/js file has and sometimes doesnt have timestamp is this normal ?

Also if you have registered users in non-admin groups they will trigger reminify every refresh..
It would be nice that only admin can force recreating files , so maybe for now    

Code: [Select]

if(isset($_SESSION['USER_ID'])

AND ($_SESSION['USER_ID'] == '1') ) {  //Detect CTRL-F5 or ?force parameter only when logged in user

is a step forward..

[crnogorac081]

Edit:

Its wierd when I put

Code: [Select]

$css[] = "http://fonts.googleapis.com/css?family=Italianno&subset=latin,latin-ext";
$css[] = "css/bootstrap.min.css";
$css[] = "..";

minify_css();

inside my custom page_head() function, it displays blank .css file.

And, maybe this function _need_minify() to be called on demand, not every time. Because even if I am admin (id =1) every time I browse in frontend, it will trigger _need_minify() and delay page to load. So I guess the best it would be to call it after messing with css/js, to make small addon tool with one button to click to rebuild minify.css/js files..

what do you think ?

[Ruud]

Sometimes minify.css/js file has and sometimes doesnt have timestamp is this normal ?

The timestamp is added when the minify.css/js is regenerated. This is to help your broser understand it needs to reload instead of using the cache.

Also if you have registered users in non-admin groups they will trigger reminify every refresh..

Only when it needs to be refreshed, or when CTRL-F5 (force refresh) or the parameter ?force is used.
A normal pageload or refresh will not regenerate the minified files, unless there are changed css files detected. This is only checked once per session!

.....it displays blank .css file.

Can't tell why from here

Note the refreshing "rules".
1. Make sure to be logged in.
2a. use CTRL-F5 or ?force to regenerate. (normal F5 or reload will not help)
2b. or delete the current minified.css completely.

Ps. The Chrome browser does not force a refresh using CTRL-F5 anymore.
To get the same effect press F12 (dev tools) and right click the reload icon left to the url bar. Choose the "Empty cache" function.

[crnogorac081]

ok, good to know.

And do you know why I cant use it inside another function ?

[Ruud]

And do you know why I cant use it inside another function ?

Why would you want to do that?

If you use some wrapper function you will need to make the $css and $js variables global within that function.

[crnogorac081]

Thanks bro I totaly forgot to make them global. It works now of course 

By the way is there a reasone why you use echo '<script src="... instead return '<script src=".. ?

Also, I noticed that it compresses all possible modules and snippets  and not just the ones in use like register_frontend_m odfiles('css/js');

[Ruud]

By the way is there a reasone why you use echo '<script src="... instead return '<script src=".. ?

This function is called to generate output. I see no advantage in returning the data and have the user do the "echo" command. It will be just a little harder to explain 

Also, I noticed that it compresses all possible modules and snippets  and not just the ones in use like register_frontend_m odfiles('css/js');

register_frontend_modfiles will generate the css/js for all installed snippets. They are loaded always and there is no telling when and if they will be used.
For modules it is normally based on what pagemodules are used on the current page.
In our case all snippet frontend css.js is generated as usual but also for all installed modules in the website.
If that was not done the minified.css/js would only work on the page where it was generated. It would not have the frontend stuff for the next page.
If minify includes any frontend files for modules that are not used in the website, just uninstall these modules! They are not used anyway.

This behavour is where "the catch" for this (experimental) module is. Not all pagemodules are happy to run together with certain others.. Confliciting stylesheets or javascript calls can happen.

If that is the case there is a "hidden" feature...

Calling minify_css(false);  and  minify_js(false); will skip adding the frontend stuff.
It will just combine/compress the listed files.
Using this option will generate less efficient css/js but it will be more fail-safe.

[crnogorac081]

Yes I agree, and you could load page related frontend css/js using register_frontend_m odfiles('css/js');

I see significant difference in page load when I minify css/js , specialy when I need to load jq, bootstrap and its plugn components.. There is a great difference with my backend theme now

So for the backend I guess I would need to load backend.css/js and backend_body.css/js for all "page" modules (snippets dont have backend css/js scripts) and "tool" modules.. Am I missing something ?

[Ruud]

So for the backend I guess I would need to load backend.css/js and backend_body.css/js for all "page" modules (snippets dont have backend css/js scripts) and "tool" modules.. Am I missing something ?

I never atually looked at this for the backend but with some modifications it might work
The backend will be relatively slow anyway.. A mod like CKeditor is loding a lot of diferent javascripts and css anyway.

The goal for this mod is to speed up the website (frontend) for visitors. It will might help in SEO ranking. Speeding up the backend is not that important in my opinion.

[crnogorac081]

I created bootstrap backend theme and It is still in development. I modified your code to work for backend theme because I an loading 10-15 css and js files (jquery, bootstrap and its plugins) So far it is much faster loading even without   ckeditor files

[crnogorac081]

Hi Ruud,

I get this notification in error log:

Code: [Select]

[E_WARNING] \modules\minified\include.php:[100] from \modules\minified\include.php:[38] _need_minify "filemtime(): stat failed for F:\Wb-Portable-2.10.x.php71\root/templates/fe_template/F:\Wb-Portable-2.10.x.php71\root/modules/wysiwyg/frontend.css"

when I am working in wb portable (windows). It causes css/js code to break in FE, because it adds lines:

F:\Wb-Portable-2.10.x.php71\root/templates/fe_template/F:\Wb-Portable-2.10.x.php71\root/modules/wysiwyg/frontend.css

to CSS and
F:\Wb-Portable-2.10.x.php71\root/templates/fe_template/F:\Wb-Portable-2.10.x.php71\root/modules/wysiwyg/frontend.js

in JS (it would probably add more files if I had more FE modules running)

I altered the code, and now it is working

Code: [Select]

function _minify_filename($relative_file, $get_content = true) {

if(substr($relative_file,0,2) == "//") $relative_file = 'https:'.$relative_file;
if(substr($relative_file,0,5) == "http:" || substr($relative_file,0,6) == "https:") {
if($get_content) return file_get_contents($relative_file);
return null;
}
// ADDED
if(preg_match('/^[A-Z]:/i', $relative_file)) {
if($get_content) return file_get_contents($relative_file);
return null;
}

of course this is in wb portable, but it could affect windows paths, in live linux server there are no problems..

cheers

[Ruud]

I altered the code, and now it is working

Good find

It will be fixed in the next version. Just a little bit different.
It is better to return the unmodified filename (windows path) when the driveletter is detected.
This way the timestamp check wil work for these files too.

Code: [Select]

if(preg_match('/^[A-Z]:/i', $relative_file)) {
return $relative_file;
}

[crnogorac081]

Cool. Good work bro !

[Ruud]

Today I updated minify to v1.1.

I noticed that due to caching the changed minified.css/js are sometimes not used. In this version I changed the naming of the css and js by using a hashed timestamp.
This results in a naming like: minified-74f0b48eac2a95f4464eea5347fea1d3.css and/or minified-593e3369aae4a87b4cd144a293ae0fb0.js
When a new minified file is created the filename will change and therefore no caching will be used.

Also the windows-path issue is fixed, and the 3rd party libraryis updated to the latest version.

Download: https://dev4me.com/modules-snippets/experimenteel/minify/