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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
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