423,818 Members | 2,250 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

How to minify (not obfuscate) your JavaScript using PHP

hsriat
Expert 100+
P: 1,654
For a good programmer, providing good comments in the code is a must. In PHP, giving comments has no demerits. But what about JavaScript? Do you really want those comments to stay in the code and make it double in size, and of course disclose what you have done when the code reaches the client (browser)?

I am not sure how many of you would have faced this problem, but I faced this many times. I am not good at memorizing things, so I give lot of code comment in my JavaScript code. And never wanted that comments to reach the client. So I used to remove comments from each file by a PHP code and then upload that minified file to the server.

Then an idea came across my mind. And I never removed comments afterwards. May be some of use would already be using this thing, but it's new to me, so thought of posting here.

Here it is...
  • Instead of a regular name folder eg. js or scripts, in which you save your JavaScript files, save them in a random name folder. Something like js_kl32lnfdn.
  • We call our external JavaScript files as
    Expand|Select|Wrap|Line Numbers
    1. <script type="text/javascript" src="/scripts/myscript.js"></script>
    Instead of this, make a PHP function, something like this:
    Expand|Select|Wrap|Line Numbers
    1. function send_script($script)
    2. {
    3.     echo "<script type=\"text/javascript\" src=\"/js.php?js=".$script."\"></script>"; 
    4.     //don't use the XML style closing tag (<script ....  />) IE would not read it.
    5. }
    6.  
    Keep this function in a saperate file.
  • In the root folder, save this PHP file (js.php)
    Expand|Select|Wrap|Line Numbers
    1. <?php
    2. //define the folder name, so that it can be changed anytime.
    3. define("FOLDER_NAME", "js_kl32lnfdn");
    4.  
    5. //path for the original file
    6. $js_original = $_SERVER['DOCUMENT_ROOT']."/".FOLDER_NAME."/".$_GET['js'];
    7.  
    8. //header for the javascript file (will give a warning if not provided)
    9. header("content-type:text/javascript; charset:UTF-8");
    10.  
    11. //alert error if file doesn't exisit
    12. if (!file_exists($js_original))
    13. die('alert(\'JavaScript file error!\')');
    14.  
    15. //include minificator class
    16. require('jsmin-1.1.0.php');
    17.  
    18. //read and minify the content
    19. $minified = JSMin::minify(file_get_contents($js_original));
    20.  
    21. //header for caching
    22. header("Expires: ".gmdate("D, d M Y H:i:s", (time()+9000)) . " GMT");
    23.  
    24. //year to write on copyright notice
    25. $year = getdate();
    26. $year = $year['year'];
    27.  
    28. //send your copyright notice
    29. echo "/* Copyright ".$year." - www.your-website.com */";
    30.  
    31. //send the minified version
    32. echo $minified;
    33. ?>
    34.  
    The minificator PHP class is here: JSMin

What will happen is..
  • The JavaScript file will get minified by the js.php file, which in itself will use a minificator class (not made by me).
  • A file with path js_kl32lnfdn/script1.js will be called as js.php?js=script1.js. So one would never come to know the path to the original (commented) file.
  • For futher security, like if you only want the logged in user to be able to call the javascript or other things, you can add some verification code just in the starting of the js.php.


Hope you will like it.

Regards,
Harpreet
May 20 '08 #1
Share this Article
Share on Google+
2 Comments


Markus
Expert 5K+
P: 6,050
Not sure why you wouldn't want a client to be able to read the comments?
Jun 24 '08 #2

hsriat
Expert 100+
P: 1,654
Just in case your comments are making your JS too bulky. For instance, for a complex DHTML page (like gmail, yahoomail), comments can make your JS to reach double in size than without comments. And of course it makes you code a bit uninterpretable.

__________________________________________

A little addition to the above js.php code, on the very first line:
Expand|Select|Wrap|Line Numbers
  1. if (!isset($_GET['js']) || $_GET['js']=="")
  2. die('alert(\'JavaScript file error!\')');
Jun 28 '08 #3