Author Topic: Experimental snippet - Minify CSS and JS and combine to single files  (Read 522 times)

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
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:
Only registered users can see contents. Please click here to Register or Login.Create and output css
Code:
Only registered users can see contents. Please click here to Register or Login.

Setup javascript
Code:
Only registered users can see contents. Please click here to Register or Login.Create and output javascript
Code:
Only registered users can see contents. Please click here to Register or Login.
More info and download on: https://dev4me.com/modules-snippets/experimenteel/minify/

Offline dbs

  • Betatester
  • **
  • Posts: 6976
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #1 on: September 05, 2017, 02:55:50 PM »
Hi Ruud, something like this is very welcome.  (Y)
Will test it in the next days.

Offline dbs

  • Betatester
  • **
  • Posts: 6976
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #2 on: September 06, 2017, 11:02:01 AM »
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.

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #3 on: September 06, 2017, 11:13:30 AM »
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.

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #4 on: September 06, 2017, 11:15:44 AM »
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!!!

Offline dbs

  • Betatester
  • **
  • Posts: 6976
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #5 on: September 06, 2017, 11:24:46 AM »
Quote
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?

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #6 on: September 06, 2017, 11:34:01 AM »
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?

Offline dbs

  • Betatester
  • **
  • Posts: 6976
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #7 on: September 06, 2017, 11:43:14 AM »
Yes, was removed.
Miniform is included with droplet sectionpicker.

Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #8 on: September 06, 2017, 01:33:41 PM »
Cool.

I needed something like thus for backend :)
no bb in signature

Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #9 on: September 07, 2017, 01:41:24 PM »
Ruud,

Code:
Only registered users can see contents. Please click here to Register or Login.
is this considered to be TEMPLATE_URL/  css/bootstrap.min.css ??

cheers
no bb in signature

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #10 on: September 07, 2017, 01:59:18 PM »
is this considered to be TEMPLATE_URL/  css/bootstrap.min.css ??
Yes,
The procedures are:
Code:
Only registered users can see contents. Please click here to Register or Login.
Non existing local files are silently skipped.

(the same rules are valid for the javascripts)


Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #11 on: September 07, 2017, 02:39:26 PM »
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:
Only registered users can see contents. Please click here to Register or Login. is a step forward..

« Last Edit: September 07, 2017, 02:54:06 PM by crnogorac081 »
no bb in signature

Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #12 on: September 07, 2017, 03:12:53 PM »
Edit:

Its wierd when I put
Code:
Only registered users can see contents. Please click here to Register or Login.
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 ?
« Last Edit: September 07, 2017, 03:27:35 PM by crnogorac081 »
no bb in signature

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #13 on: September 07, 2017, 03:33:21 PM »
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.


Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #14 on: September 07, 2017, 03:58:14 PM »
ok, good to know.

And do you know why I cant use it inside another function ?
no bb in signature

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #15 on: September 07, 2017, 04:12:17 PM »
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.

Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #16 on: September 07, 2017, 11:37:11 PM »
Thanks bro I totaly forgot to make them global. It works now of course  :-o

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');
« Last Edit: September 07, 2017, 11:49:33 PM by crnogorac081 »
no bb in signature

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #17 on: September 08, 2017, 10:22:13 AM »
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  8-)

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... :-D

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.

Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #18 on: September 08, 2017, 10:30:33 AM »
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 :D

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 ?
no bb in signature

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #19 on: September 08, 2017, 11:58:55 AM »
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.

Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #20 on: September 08, 2017, 12:39:35 PM »
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
no bb in signature

Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #21 on: October 27, 2017, 12:26:51 AM »
Hi Ruud,

I get this notification in error log:

Code:
Only registered users can see contents. Please click here to Register or Login.
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:
Only registered users can see contents. Please click here to Register or Login.
of course this is in wb portable, but it could affect windows paths, in live linux server there are no problems..

cheers
no bb in signature

Offline Ruud

  • WebsiteBaker Org e.V.
  • **
  • Posts: 3563
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #22 on: October 28, 2017, 11:05:15 PM »
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:
Only registered users can see contents. Please click here to Register or Login.

Offline crnogorac081

  • Posts: 1848
  • Gender: Male
Re: Experimental snippet - Minify CSS and JS and combine to single files
« Reply #23 on: October 29, 2017, 12:07:56 PM »
Cool. Good work bro !
no bb in signature

 

postern-length