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);