Minify HTML, CSS, XHTML Blogger

Minify HTML, CSS, XHTML BloggerShare on FacebookTwitterTwitter

Minify HTML, CSS, XHTML Blogger




Minify HTML CSS XHTML Blogger

Tools ini cukup simple, tapi bisa dipakai untuk semua jenis code website ( HTML, CSS, XHTML Blogger ), karena fungsinya hanya untuk membuang multi whitespace (ruang kosong).
BTW tools ini juga ane pakai untuk blog WebJalanan ^_^ ( 9 September 2019 )

Plus :

  • Ukuran file jadi lebih kecil (-50%)
  • Loading website lebih cepat
  • Tidak merubah code asal kecuali whitespace

Min :

  • Code jadi ugly
  • Tidak memperbaiki javascript 

NOTE :

Sebelum memakai tools, ane sarankan untuk menyimpan source code aslinya, agar lebih mudah kalau ingin mengeditnya lagi, bila terjadi error, kemungkinan besar karena javascript agan yg bermalah, silahkan perbaiki javascript agan di sini : https://closure-compiler.appspot.com/home

Contoh Javascript yang bermasalah :

//ini comment javascript <== Bikin ERROR
/*ini comment javascript */ <== GOOD

Bikin Error

var a = 10
    b = 15

Seharusnya

var a = 10,
    b = 15

Source Code Tool (Jquery)

<textarea id="xCode"></textarea>
<textarea id="codeMini"></textarea>
<button id="minifyCode">Minify</button>
<button id="copyCode">Copy To Clipboard</button>
<button id="clearCode">Clear</button>
<script>
$('#minifyCode').click(function(){
    var xCode = $('#xCode').val()
        .replace(/\s{2,3}/gi, '')
        .replace(/\n[}]/gi, '}')
        .replace(/[,]\n/gi, ',')
        .replace(/(>|&gt;)(\n|\t|\s+?)(<|&lt;)/gi, '$1$3')
        .replace(/\s=\s/gi, '=')
        .replace(/\/\/<!\[CDATA\[(\n)/gi, '//<![CDATA[\n')
        .replace(/(\n\/\/.*?)(<\/script>)/gi, '$1\n$2');
    $('#codeMini').val(xCode).removeClass('hide');
});

$('#copyCode').click(function(){
    $('#codeMini').select();
    document.execCommand("copy");
});

$('#clearCode').click(function(){
    $('#xCode').val('');
    $('#codeMini').addClass('hide');
});
</script>