PimpMyJS - Uglify or Beautify your JavaScript, it's your choice...

Uglify or Beautify your JavaScript, it's your choice...

It's a code pimper with uglify option! You can use it's interface or simply the webservice to minify or get a pretty print of your javascript code

Options

  • Invert the minification process: turns the ugly JS to a pretty printed code. *
  • Merge and move var declarations to the top of the scope
  • Black Magic Voodoo for better compression
  • Escape </script> to prevent errors in inline scripts
×

Pimped!

Checkout the form source to see the webservice's funcionality!

How does this work?

You send your Javascript code, ugly or not:

var Song = Backbone.Model.extend({
    defaults: {
        name: "Not specified",
        artist: "Not specified"
    },
    initialize: function() {
        console.log("Music is the answer");
    }
});

var Album = Backbone.Collection.extend({
    model: Song
});

var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });
var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });

var myAlbum = new Album([ song1, song2, song3]);
console.log(myAlbum.models); // [song1, song2, song3]

Then you can uglify it:

var Song=Backbone.Model.extend({defaults:{name:"Not specified",artist:"Not specified"},initialize:function(){console.log("Music is the answer")}}),Album=Backbone.Collection.extend({model:Song}),song1=new Song({name:"How Bizarre",artist:"OMC"}),song2=new Song({name:"Sexual Healing",artist:"Marvin Gaye"}),song3=new Song({name:"Talk It Over In Bed",artist:"OMC"}),myAlbum=new Album([song1,song2,song3]);console.log(myAlbum.models)

Don't know what's written in that ugly js? Try beautifying it!

Yeah, it's not the same original code, but you can read it now, right?

This doesn't bring beauty of Dart of CoffeeScript codes, ever.

var Song = Backbone.Model.extend({
    defaults: {
        name: "Not specified",
        artist: "Not specified"
    },
    initialize: function() {
        console.log("Music is the answer");
    }
}), Album = Backbone.Collection.extend({
    model: Song
}), song1 = new Song({
    name: "How Bizarre",
    artist: "OMC"
}), song2 = new Song({
    name: "Sexual Healing",
    artist: "Marvin Gaye"
}), song3 = new Song({
    name: "Talk It Over In Bed",
    artist: "OMC"
}), myAlbum = new Album([ song1, song2, song3 ]);

console.log(myAlbum.models);

What do you mean by unsafe?

There're some code Uglify can compress but it's possible to break your code, so if you want it on, you have to check this option

This will be ignored if you check the beautify option

obj.toString() // => obj+""
new Array(1, 2, 3, 4) // => [1,2,3,4]
Array(a, b, c)        // => [a,b,c]
new Array(5)          // => Array(5)
new Array(a)          // => Array(a)

Inline Scripts

You can prevent showing </script> in your code, turn on this option and Uglify will escape it! 

var a = "</script>"; // => var a="<\/script>"

Lift me a var...

As well said in UglifyJS documentation:

"merge and move var declarations to the top of the scope; discard unused function arguments or variables; discard unused (named) inner functions. It also tries to merge assignments following the var declaration into it.

Note that although it might increase the file size (on jQuery it gains 865 bytes, 243 after gzip) it’s technically more correct: in certain situations, dead code removal might drop variable declarations, which would not happen if the variables are lifted in advance."

function f(a, b, c, d, e) {
    var q;
    var w;
    w = 10;
    q = 20;
    for (var i = 1; i < 10; ++i) {
        var boo = foo(a);
    }
    for (var i = 0; i < 1; ++i) {
        var boo = bar(c);
    }
    function foo(){ /*...*/ }
    function bar(){ /*...*/ }
    function baz(){ /*...*/ }
}

Check out the lift vars result (with Beautify):

function f(a, b, c) {
    var f, g, h, i;
    function j() {}
    function k() {}
    g = 10, f = 20;
    for (h = 1; h < 10; ++h) i = j(a);
    for (h = 0; h < 1; ++h) i = k(c);
}