Documentation > Best Practices and Examples > Services

Implementing Minifier in Crownpeak

You can use the minifier API call to reduce the size of your cascading style sheets (css) and javascript (js) files in your hosting environment. The Minifier is an executable file inside Crownpeak that enables you to reduce the size of of your css and javascript files. Reducing the size of these files limits rendering time and your pages publish faster.

Overview


The minifier code can be added to any of your templates, or it can have its own standalone template that gets fed a binary CSS/JS asset to create a new, minified CSS/JS asset. The output of the minifier methods is a string.

Example: CSS


string minified = string.Empty; 
    #region "cssCode"
      string cssCode = @@"
      /*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
      .fancybox-wrap,
      .fancybox-skin,
      .fancybox-outer,
      .fancybox-inner,
      .fancybox-image,
      .fancybox-wrap iframe,
      .fancybox-wrap object,
      .fancybox-nav,
      .fancybox-nav span,
      .fancybox-tmp
      {
      padding: 0;
      margin: 0;
      border: 0;
      outline: none;
      vertical-align: top;
      }
                .fancybox-wrap {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 8020;
      }
                .fancybox-skin {
      position: relative;
      background: #f9f9f9;
      color: #444;
      text-shadow: none;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      }
                .fancybox-opened {
      z-index: 8030;
      }
                .fancybox-opened .fancybox-skin {
      -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
      }
                .fancybox-outer, .fancybox-inner {
      position: relative;
      }
                .fancybox-inner {
      overflow: hidden;
      }
                .fancybox-type-iframe .fancybox-inner {
      -webkit-overflow-scrolling: touch;
      }
                .fancybox-error {
      color: #444;
      font: 14px/20px ""Helvetica Neue"",Helvetica,Arial,sans-serif;
      margin: 0;
      padding: 15px;
      white-space: nowrap;
      }
                .fancybox-image, .fancybox-iframe {
      display: block;
      width: 100%;
      height: 100%;
      }
                .fancybox-image {
      max-width: 100%;
      max-height: 100%;
      }
                #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
      background-image: url('fancybox_sprite.png');
      }
                #fancybox-loading {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -22px;
      margin-left: -22px;
      background-position: 0 -108px;
      opacity: 0.8;
      cursor: pointer;
      z-index: 8060;
      }
                #fancybox-loading div {
      width: 44px;
      height: 44px;
      background: url('fancybox_loading.gif') center center no-repeat;
      }
                .fancybox-close {
      position: absolute;
      top: -18px;
      right: -18px;
      width: 36px;
      height: 36px;
      cursor: pointer;
      z-index: 8040;
      }
                .fancybox-nav {
      position: absolute;
      top: 0;
      width: 40%;
      height: 100%;
      cursor: pointer;
      text-decoration: none;
      background: transparent url('blank.gif'); /* helps IE */
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      z-index: 8040;
      }
                .fancybox-prev {
      left: 0;
      }
                .fancybox-next {
      right: 0;
      }
                .fancybox-nav span {
      position: absolute;
      top: 50%;
      width: 36px;
      height: 34px;
      margin-top: -18px;
      cursor: pointer;
      z-index: 8040;
      visibility: hidden;
      }
                .fancybox-prev span {
      left: 10px;
      background-position: 0 -36px;
      }
                .fancybox-next span {
      right: 10px;
      background-position: 0 -72px;
      }
                .fancybox-nav:hover span {
      visibility: visible;
      }
                .fancybox-tmp {
      position: absolute;
      top: -99999px;
      left: -99999px;
      visibility: hidden;
      max-width: 99999px;
      max-height: 99999px;
      overflow: visible !important;
      }
                /* Overlay helper */
                .fancybox-lock {
      overflow: hidden;
      }
                .fancybox-overlay {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      display: none;
      z-index: 8010;
      background: url('fancybox_overlay.png');
      }
                .fancybox-overlay-fixed {
      position: fixed;
      bottom: 0;
      right: 0;
      }
                .fancybox-lock .fancybox-overlay {
      overflow: auto;
      overflow-y: scroll;
      }
                /* Title helper */
                .fancybox-title {
      visibility: hidden;
      font: normal 13px/20px ""Helvetica Neue"",Helvetica,Arial,sans-serif;
      position: relative;
      text-shadow: none;
      z-index: 8050;
      }
                .fancybox-opened .fancybox-title {
      visibility: visible;
      }
                .fancybox-title-float-wrap {
      position: absolute;
      bottom: 0;
      right: 50%;
      margin-bottom: -35px;
      z-index: 8050;
      text-align: center;
      }
                .fancybox-title-float-wrap .child {
      display: inline-block;
      margin-right: -100%;
      padding: 2px 20px;
      background: transparent; /* Fallback for web browsers that doesn't support RGBa */
      background: rgba(0, 0, 0, 0.8);
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
      text-shadow: 0 1px 2px #222;
      color: #FFF;
      font-weight: bold;
      line-height: 24px;
      white-space: nowrap;
      }
                .fancybox-title-outside-wrap {
      position: relative;
      margin-top: 10px;
      color: #fff;
      }
                .fancybox-title-inside-wrap {
      padding-top: 10px;
      }
                .fancybox-title-over-wrap {
      position: absolute;
      bottom: 0;
      left: 0;
      color: #fff;
      padding: 10px;
      background: #000;
      background: rgba(0, 0, 0, .8);
      }";
      #endregion "cssCode"
   minified = ServicesMinifier.MinifyCSS(cssCode);

Example: Javascript


 string minified = string.Empty;
//Taken from MasterTraining: /SAMPLE Pharmaceutical/_Assets/js/jquery.slickforms.js
#region "jsCode"
      string jsCode = @@"
(function($){
    //define the plugin
    $.fn.dcSlickForms = function(options) {
        //set default options
        var defaults = {
            classError: 'error',
            classForm: 'slick-form',
            align: 'left',
            animateError: true,
            animateD: 10,
            ajaxSubmit: true,
            errorH: 24,
            successH: 40
        };
        //call in the default otions
        var options = $.extend(defaults, options);
        
        //act upon the element that is passed into the design    
        return this.each(function(options){
            
            // Declare the function variables:
            var formAction = $(this).attr('action');
            var emailReg = /^([\w-\.]+@@([\w-]+\.)+[\w-]{2,4})?$/;
            var textError = $('.v-error', this).val();
            var textEmail = $('.v-email', this).val();
            var $error = $('<span class="" error""></span>');
            var $form = this;
            var $loading = $('<div class="" loading""><span></span></div>');
            var errorText = '* Required Fields';
            var check = 0;
            
            $('input',$form).focus(function(){
                $(this).addClass('focus');
            });
            $('input',$form).blur(function(){
                $(this).removeClass('focus');
                masonryHeight();
            });
            $('.nocomment').hide();
            $('.defaultText',this).dcDefaultText();
            $('.'+defaults.classForm+' label').hide();
            
            // Form submit & Validation
            $(this).submit(function(){
                if(check == 0){
                    horig = $('#bottom-container .boxes').height();
                }
                check = 1;
                formReset($form);
                $('.defaultText',$form).dcDefaultText({action: 'remove'});
                // Validate all inputs with the class ""required""
                $('.required',$form).each(function(){
                    var label = $(this).attr('title');
                    var inputVal = $(this).val();
                    var $parentTag = $(this).parent();
                    if(inputVal == ''){
                        $parentTag.addClass('error').append($error.clone().text(textError));
                    }
            
                    // Run the email validation using the regex for those input items also having class ""email""
                    if($(this).hasClass('email') == true){
                        if(!emailReg.test(inputVal)){
                            $parentTag.addClass('error').append($error.clone().text(textEmail));
                        }
                    }
                });
                // All validation complete - Check if any errors exist
                // If has errors
                if ($('.error',$form).length) {
                    masonryHeight();
                    $('.btn-submit',this).before($error.clone().text(textError));
                    return false;
                } else {
                    if(defaults.ajaxSubmit == true){
                        //$(this).addClass('submit').after($loading.clone());
                        $('.defaultText',$form).dcDefaultText({action: 'remove'});
                        //$.post(formAction, $(this).serialize(),function(data){
                        //    $('.loading').fadeOut().remove();
                        //    $('.response').html(data).fadeIn();
                        //    var x = horig + defaults.successH;
                        //    $('.boxes.masoned').animate({height: x+'px'},400);
                        //    $('fieldset',this).slideUp();
                        //});
                    } else {
                        $form.submit();
                    }
                }
                // Prevent form submission
                //return false;
            });
    
            // Fade out error message when input field gains focus
            $('input, textarea').focus(function(){
                var $parent = $(this).parent();
                $parent.addClass('focus');
                $parent.removeClass('error');
                
            });
            $('input, textarea').blur(function(){
                var $parent = $(this).parent();
                var checkVal = $(this).attr('title');
                if (!$(this).val() == checkVal){
                    $(this).removeClass('defaulttextActive');
                }
                $parent.removeClass('error focus');
                $('span.error',$parent).hide();
            });
            
            function formReset(obj){
                $('li',obj).removeClass('error');
                $('span.error',obj).remove();
                masonryHeight();
            }
            
            function masonryHeight(){
                var q = $('li.error',$form).length;
                if( q > 0 ){
                    var x = horig + (q * defaults.errorH);
                    $('.boxes.masoned').animate({height: x+'px'},400);
                }
            }
        });
    };
})(jQuery);
/*
 * DC jQuery Default Text - jQuery Default Text
 * Copyright (c) 2011 Design Chemical
 * http://www.designchemical.com
 */
(function($){
    //define the plugin
    $.fn.dcDefaultText = function(options) {
    
        //set default options
        var defaults = {
            action: 'add', // alternative 'remove'
            classActive: 'defaultTextActive'
        };
        //call in the default otions
        var options = $.extend(defaults, options);
  
        return this.each(function(options){
            
            if(defaults.action == 'add'){
            
                $(this).focus(function(srcc) {
                    if ($(this).val() == $(this)[0].title) {
                        $(this).removeClass(defaults.classActive);
                        $(this).val('');
                    }
                });
                
                $(this).blur(function() {
                    if ($(this).val() == "") {
                        $(this).addClass(defaults.classActive);
                        $(this).val($(this)[0].title);
                    }
                });
                $(this).addClass(defaults.classActive).blur();
            }
            
            if(defaults.action == 'remove'){
            
                var checkVal = $(this).attr('title');
                if ($(this).val() == checkVal){
                    $(this).val('');
                }
                    
            }
        });
    };
})(jQuery);";
#endregion "jsCode"
minified = ServicesMinifier.MinifyJS(jsCode);

Connect with Crownpeak