• Blogs (9)
    • 📱 236 - 992 - 3846

      đź“§ jxjwilliam@gmail.com

    • Version: ‍🚀 1.1.0
  • JSMin - JavaScript minification

    Blogs20132013-10-01


    JSMin - JavaScript minification

    YUI compressor can do JavaScript minification. Besides it, An excellent tool for JavaScript minification is JSMin and it also has a PHP port, among others. One obfuscation tool is Packer — a free online tool that, incidentally, is used by jQuery.

    <?php
    include 'jsmin.php';
    array_shift($argv);
    
    foreach ($argv AS $file) {
      echo '/* ', $file, ' */';
      echo JSMin::minify(file_get_contents($file)), "n";
    }
    ?>
    //and,
    $ php compress.php source1.js source2.js source3.js > result.js

    This will combine and minify the files source1.js, source2.js, and source3.js into one file, called result.js.

    CSS Merge and Minify

    For your CSS files you can follow the guidelines we discussed for JavaScripts: minify and merge all style sheets into a single file to minimize download size and the number of HTTP requests taking place. Merging all files into one is a trivial task, but the job of minification may be a bit harder, especially if you’re using CSS hacks to target specific browsers — since some hacks exploit parsing bugs in the browsers, they might also trick your minifier utility.

    You may decide not to go through the hassle of minifying style sheets (and the associated re-testing after minification). After all, if you decide to serve the merged and gzipped style sheet, that’s already a pretty good optimization.

    If you do decide to minify CSS, apart from the option of minifying manually (simply removing comments and whitespace), you can use some of the available tools, such as CSSTidy, PEAR’s HTML_CSS library (http://pear.php.net/package/HTML\_CSS/), or SitePoint’s own Dust-me Selectors Firefox plugin.

    Web optimization

    Again, to do web optimization, from http://www.sitepoint.com/web-site-optimization-steps/:

    • making fewer HTTP requests by combining components — JavaScript files, style sheets and images (by using CSS Sprites)
    • serving all textual content, including HTML, scripts, styles, XML, JSON, and plain text, in a gzipped format
    • minifying and placing scripts at the bottom, and style sheets at the top of your files
    • using separate cookie-free domains for your components