TIP: Use Markdown or, <pre> for multi line code blocks / <code> for inline code.
These forums are read-only and for archival purposes only!
Please join our new forums at discourse.kohanaframework.org
Minify module for Kohana 3
  • I guess people here will find this useful, since I use it on all my projects. It's a Minify module (has been heavily modified to fit kohana auto-loading style, structure and code wise) based on the best minifier for PHP imho > http://code.google.com/p/minify/ of version 2.1.4 (lastest released version)
    Extract the contents to 'modules' folder, enable it in the bootstrap:

    Kohana::modules(array(
    'minify' => MODPATH.'minify', // Minify
    ));

    and the only thing you need to do actually, is to create a subfolder on 'application/cache' called minify, and you're ready to go (otherwise you'll get problems with the file cache).
    Call it in your HTML files like:



    it's already configured with a route called minify, that maps to '/min', and if you don't want to output what is your js or css folder, you can use groups, by specifying it in your /application/config/minify.php file:

    in PHP:

    return array(
    'groupsConfig' => array(
    'css' => array('//css/file1.css', '//css/file2.css', '//css/file3.css')
    )
    );

    in HTML:



    or Kohana style:

    <?php echo html::style('min?g=css') ?>

    Link: http://github.com/gahgneh/minify-kohana
    Have fun!
  • Very useful! Thanks!
  • I've been looking for something like this, thanks
  • Nice work :)

  • minify module working properly but images url is wrong. css folder is templates/admin/css/style.css config: 'rewriteCssUris' => true, 'documentRoot' => DOCROOT . 'templates/admin/css', <-- is this correct ?

    for example: url(../images/image.jpg) turn to url(in/css/localhost/work/templates/admin/images/image.jpg)

    What is wrong ? any suggestions ?

  • the documentRoot is DOCROOT, means, it need to be at least the "folder" your project is in, as you shouldn't specify the path to the css/js in documentRoot, it's meant to be the root (I guess it's clear that it must be the root lol)

  • Google Page Speed was complaining about static resources with query strings in their url: /min?g=groupName

    I forked a copy of your code and added the ability to use /min/groupName or /min?g=groupName:

    https://github.com/gauravspatel/minify-kohana

    It's a bit of a hack when you look at what I did, but it works beautifully.

  • minapp.php:line 66

    $file = $_SERVER['DOCUMENT_ROOT'] . substr($file, 1);
    

    to

    $file = DOCROOT . substr($file, 1);
    
  • I've forked the module and works now with the latest version of Minify (2.1.5) and Kohana 3.2.

    https://github.com/Mikaweb/minify-kohana

  • mikaweb, thank you!

  • I detected an issue with images path in CSS files (the path is broken by Minify). But basically, it should work fine.

  • The biggest problem with minifying assets is with the relative urls in CSS/JS code, like background:url(...).

    So if you keep your CSS files in directories, when you minify it you'll get one file, but the URLs inside the minifyed file would be broken.

    For Javascript, I thought of a solution to create a JS object container in the view and pass an URLs from PHP to JS.

    Any ideas for this? I though of using LESS, but didn't had time to try it out just yet...

  • @feketegy

    I recommend SASS and Compass. Things like LESS are client side, or designed to be. SASS/Compass are server side, so they:

    1. Compile to the correct CSS, minified, single file, etc. This prevents any negative effect on your site's speed; google looks at your site speed FYI.

    2. Can turn on/off things like hacks etc and thus produce very nice code, if used right

    3. Can handle more complicated tasks for you such as generate very nice and clean sprite maps auto-magically! :)

    4. Is capable of deep analysis and computations. For example, you can embed (ie. convert to datastream and put right in the css file) font files, or check an images dimentions if your style needs to adjust to something like an icon or an empty avatar, etc.

    If you have your script in CSS you can just drop it in SASS, and it will just work. It's completely backwards compatible with CSS.

    Assuming you're not doing it statically, for something like media routes you can just use the following structure:

    (your route should load any file from assets/)

    /style_name
       /assets
          /images
       /src
          lib/
             functions.scss
          boilerplate.scss
          bootstrap.scss
       config.rb
    

    Where config.rb looks like this:

    # Require any additional compass plugins here.
    
    # required configuration
    http_path = ""
    css_dir = "assets"
    images_dir = "assets/images"
    relative_assets = true
    
    # Output style
    output_style = :compressed
    line_comments = false
    
    # source directory
    sass_dir = "src"
    

    If you're on windows add a little script in the root say run.compass.cmd for easy access from IDEs:

    cd /d %~dp0
    compass watch -c %~dp0\config.rb
    

    The boilerplate as you can guess is, your reset, restyle, etc. The bootstrap should set what part of compass you want to use and set the configuration. It's not required at all, just a good idea. Here's an example:

    // == Compass ==================================================================
    
    // -- Browser Support ----------------------------------------------------------
    
    // Hacks
    $legacy-support-for-ie6 : true;
    $legacy-support-for-ie7 : true;
    $legacy-support-for-ie8 : true;
    
    // Vendor extentions
    // http://www.w3.org/TR/css3-syntax/#vendor-specific
    $experimental-support-for-mozilla   : true;
    $experimental-support-for-webkit    : true;
    $experimental-support-for-opera     : true;
    $experimental-support-for-microsoft : true;
    $experimental-support-for-khtml     : true;
    
    // Additonal settings
    $support-for-original-webkit-gradients : false;
    $experimental-support-for-svg          : true;
    $experimental-support-for-pie          : false;
    
    @import "compass/support";
    
    // -- Utilities ----------------------------------------------------------------
    
    // CSS3
    
    @import "compass/css3/images";
    
    @import "compass/css3/transition";
    
    @import "compass/css3/inline-block";
    
    $default-text-shadow-color    : #aaaaaa;
    $default-text-shadow-h-offset : 0px;
    $default-text-shadow-v-offset : 0px;
    $default-text-shadow-blur     : 1px;
    @import "compass/css3/text-shadow";
    
    $default-border-radius : 5px;
    @import "compass/css3/border-radius";
    
    $default-box-shadow-color    : #333333;
    $default-box-shadow-h-offset : 0px;
    $default-box-shadow-v-offset : 0px;
    $default-box-shadow-blur     : 5px;
    @import "compass/css3/box-shadow";
    
    // etc
    
    @import "compass/utilities/sprites/base";
    
    @import "compass/layout/stretching";
    
    $contrasted-dark-default        : black;
    $contrasted-light-default       : white;
    $contrasted-lightness-threshold : 30%;
    @import "compass/utilities/color/contrast";
    
    @import "compass/utilities/general/min";
    
    // -- Quick API Reference ------------------------------------------------------
    /* Color: 
     *   adjust-lightness($color, $amount), adjust-saturation($color, $amount)
     *   scale-lightness($color, $amount), scale-saturation($color, $amount)
     * Image:
     *   image-width($image), image-height($image)
     * Embedding:
     *   inline-image($image, [$mime-type])
     *   inline-font-files([$font, $format]*)
     * Math:
     *   pi(), sin($number), cos($number), tan($number)
     * Contrast:
     *   contrast-color($color, [$dark], [$light], [$threshold]), 
     *   contrasted($background-color, [$dark], [$light], [$threshold])
     */
    
    // == etc ======================================================================
    
    @import "lib/functions";
    @import "boilerplate";
    
    // default image folder; relative to output
    $images-dir : "images/" !default;
    

    Every time you include a file in SASS it just includes the file, so for example the css equivalent for bootstrap contains the css for boilerplate. Similarly if you had a main.scss file and include bootstrap it will contain the code for both boilerplate and bootstrap in the resulting main.css.

    Regarding using them, you should know that these are languages for trading laziness for flexibility. So for example, say I had two boxes, one of which was a navigation column.

    @import 'bootstrap';
    
    #page.route-Something {
    
        // base
        $bg_color     : #eee;
        $fg_color     : #222;
        // navigation
        $nav_bg       : $bg_color;
        $nav_width    : 180px;
    
        & {
            padding-left: $nav_width;
        }
    
        #navigation {
            $local_margin : 10px;
            $local_border : 1px;
            // postion
            position: absolute; left: 0; top: 0;
            width: $nav_width - ($local_margin * 2 + $local_border * 2); 
            margin: 0 $local_margin 0 $local_margin;
            border: $local_border solid $nav_bg;
            border-top: $local_margin solid $nav_bg;
            @include stretch;
            // etc
            background: darken($nav_bg, 15%);
            color: contrast-color($nav_bg);
            @include box-shadow(0 0 10px darken($nav_bg, 50%));
        }
    
    }
    

    It might look complicated, but changing the look of the style doesn't require changing the code itself, just altering the variables at the top. Combined with proper use of functions, mixins, and class extending, you can get very compact smart styles.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion