Plugins for minifying JS & CSS in Visual Studios - javascript

This is just a general question but are there any Visual Studio plugins that will minify your JS and CSS files on build/deploy?
I search a little bit and found one called Bundler & Minifier but reading the recent reviews, there are many that say the current version is buggy and does not always work. I don't want to risk anything going wrong with my website.
Are there any other plugins out there that you have used consistently and are reliable?
Please let me know!
Thank you.

Related

What was used to obfuscate this Javascript or how can I deobfuscate it?

I would appreciate if someone could identify what tool or process may have been used to obfuscate two files.
It is actually code that we hired an HTML5 developer to create. On delivery, some of the .js code was obfuscated. I did specify that we would get the source code, but for various reasons, I don't want to force that, at least not right now. I don't need to edit the source code yet, but I want to know my options and perhaps simplify the situation.
Here are small excerpts from the two files
data.js (from the start of the file)
{"project": [null,null,[[0,true,false,false,false,false,false,false,false,false],[1,true,false,false,false,false,false,false,false,false],[2,true,false,false,false,false,false,false,false,false],[3,false,true,true,true,true,false,false,false,false],[4,true,false,false,false,false,false,false,false,false],[5,false,true,true,true,true,true,true,true,false],[6,false,true,true,true,true,true,true,true,false],[7,false,true,true,true,true,true,true,true,false],[8,true,false,false,false,false,false,false,false,false]],[["t0",5,false,[],0,0,null,[["Default",5,false,1,0,false,3756169185149289,[["imgs/bg-sheet0.png",45907,0,0,1105,500,1,0.5004525184631348,0.5,[],[],0]]]],[],false,false,5609930934870015,[],null],["t1",5,false,[],0,0,null,[["Default",30,false,1,0,false,6181700866648787,[["imgs/m-sheet0.png",3199641,1,1,337,500,1,0.501483678817749,0.5,[],[],0],["imgs/m-sheet0.png",3199641,340,1,337,500,1,0.501483678817749,0.5,[],[],0],["imgs/m-sheet0.png",3199641,679,1,337,500,1,0.501483678817749,0.5,[],[],0],["imgs/m-sheet0.png",3199641,1018,1,337,500,1,0.501483678817749,0.5,[],[],0],["imgs/m-sheet0.png",3199641,1357,1,337,500,1,0.501483678817749,0.5,[],[],0],["imgs/m-sheet0.png",3199641,1696,1,337,500,1,0.501483678817749,0.5,[],[],0],["imgs/m-sheet0.png",3199641,1,503,337,500,1,0.501483678817749,0.5,[],[],0],[.....
runtime.js (also from the start of the file)
'use strict';var ba,ca,da,ea,fa,ga,B,ha,ja,ka,la,ma,na,oa,pa,qa,ta,ua,va,wa,xa,ya,Aa,Ba,O,Da,Ea,Fa,Ga,Ha,R,Ia,Ja,Ka,La,Na,Oa,Pa,Qa,Ra,Sa,Ta,Ua,Va,ab,bb,cb,db,eb,fb,gb,hb,ib,jb,kb,lb,nb,ob,pb,qb,rb,sb,tb,ub,vb,wb,xb,yb,zb,Ab,Bb,Cb,Db,Fb,Gb,Hb,Ib,Jb,Kb,Lb,Mb,Nb,Ob,Pb,Qb,Rb,Sb,Tb,Ub,Vb,Wb,Xb,Yb,Zb,$b,ac,bc,cc,dc,ec,fc,gc,hc,ic={},jc={};"function"!==typeof Object.getPrototypeOf&&(Object.getPrototypeOf="object"===typeof"test".__proto__?function(g){return g.__proto__}:function(g){return g.constructor.prototype});
(function(){function g(a,x,b,f){this.set(a,x,b,f)}function q(){this.xc=this.wc=this.zc=this.yc=this.Oc=this.Nc=this.gc=this.fc=0}function l(a,x,b,f){a<x?b<f?(y=a<b?a:b,p=x>f?x:f):(y=a<f?a:f,p=x>b?x:b):b<f?(y=x<b?x:b,p=a>f?a:f):(y=x<f?x:f,p=a>b?a:b)}function h(){this.items=this.ie=null;this.yi=0;I&&(this.ie=new Set);this.Gh=[];this.ef=!0}function e(a){P[w++]=a}function r(){this.R=this.jl=this.y=this.Rl=0}function c(a){this.qh=[];this.dp=this.fp=this.gp=this.ep=0;this.ej(a)}function b(a,x){this.Xl=a;this.Wl=x;this.cells={}}function t(a,x){this.Xl=;this.Wl=x;this.cells={}}function d(a,x,b){var f;return A.length?(f=A.pop(),f.Km=a,f.x=x,f.y=b,f):new ba(a,x,b)}function a(a,x,b){this.Km=a;this.x=x;this.y=b;this.Ab=new ca}function f(a,x,b){var f;return D.length?(f=D.pop(),f.Km=a,f.x=x,f.y=b,f):new da(a,x,b)}function m(a,x,b){this.Km=a;this.x=x;this.y=b;this.Ab=[];this.Ug=!0;this.fe=new ca;this.Lh=!1}function k(a,x){return a.Pd-x.Pd}ea=function(a){window.console&&window.console.log&&window.console.log(a)};
And from the end of the same file
h.zz=function(e){this.r=e};h.kz=function(e){this.Wh=e};h.sz=function(e){this.J=e};h.rz=function(e,g,c,b,l,d,a,f){this.r=e;this.J=g;this.Wh=c;h.Pt.apply(this,[b]);h.Tt.apply(this,[l]);h.Nt.apply(this,[d]);h.Yt.apply(this,[a]);this.Rb=f;this.zf()};q.eb={};q=q.eb;q.$y=function(e){e.u(this.L/(this.duration+this.na+this.Fa))};q.az=function(e){e.u(this.L)};q.Ps=function(e){e.u(this.duration)};q.Ey=function(e){e.u(this.na)};q.yy=function(e){e.u(this.Fa)};q.Gz=function(e){e.Nb(this.target)};q.Jz=function(e){e.u(this.value)};q.ag=function(e){e.Ea(this.ag?1:0)}})();functionc()return[tc,uc,wc,vc,sc,Z,zc,xc,yc,Ec,Ac,Fc,X.prototype.g.yo,zc.prototype.F.As,zc.prototype.g.Ns,zc.prototype.F.Ko,zc.prototype.F.Ho,zc.prototype.F.Io,zc.prototype.F.Jo,zc.prototype.F.ro,X.prototype.g.Dt,Z.prototype.F.Os,X.prototype.F.du,zc.prototype.F.Rt,Fc.prototype.F.Ut,Fc.prototype.F.Vt,Fc.prototype.F.Mo,Ac.prototype.F.$t,X.prototype.g.Ws,wc.prototype.g.Ys,Z.prototype.g.Ts,Z.prototype.F.Lt,X.prototype.g.cu,tc.prototype.F.Play,X.prototype.g.so,wc.prototype.F.Mt,wc.prototype.g.Dl,yc.prototype.g.Fl,sc.prototype.F.CallFunction,Z.prototype.F.Kt,X.prototype.F.Ot,X.prototype.F.Wt,X.prototype.g.Ks,Z.prototype.F.Zt,Z.prototype.F.St,Z.prototype.g.Xs,X.prototype.F.Gt,X.prototype.F.It,uc.prototype.F.Ss,X.prototype.F.Ms,Z.prototype.F.Qt,Z.prototype.eb.Hl,Ec.prototype.F.Et,Z.prototype.g.to,Ac.prototype.F.Ht,Z.prototype.g.Js,Fc.prototype.g.wo,Z.prototype.g.Hs,Z.prototype.g.Ls,X.prototype.F.Bs,X.prototype.F.au,Z.prototype.g.Is,sc.prototype.g.xj]};
There are many tools available to help deobfuscate code, plugins like javascript-deobfuscator and websites such as this and this can help in the process but sometimes if the obfuscation is incredibly complex or too deep some people have noted problems with performance etc.
As to what tool was used to obfuscate the code that list is also potentially very large as for many people obfuscation is common practice to protect the code as well as to reduce the memory requirement of a script. They are also widely available like this and this. It really depends on the level of obfuscation they wanted to reach.
here are some other popular options for obfuscation:
YUI Compressor
Google closure compiler
JSSCrambler

Minify CSS and JS for Magento

I have an issue with minifying CSS and Javascript for Magento. Our website now is 1.1 MB large and we want to reduce it to 1 MB (or less than that if it is possible). I used the function "CSS Settings"/"Javascript Settings" in Magento but it effect one of our extensions so I have to unable them. I am wondering is there any other way to minify the CSS/Js by coding or something like that as I do not want to use extension for this matter. I am keen to find another method that can speed up our site because it could help us rank better in Google Search battle. Thank you in advance.
You can minify CSS and Javascript online. Have you tried it ? If not please visit these links - :)
CSS MINIFIER
JAVASCRIPT MINIFIER

Debugging Uglified javascript in production environment

I'm new to AngularJS and Grunt. I have two grunt tasks setup in GruntFile.js for dev and production. For production I'm uglifying & combine many js files into one.
I need some guidance/tips on how to debug uglified javascript code in production if any problem arises. I tried googling asking my co-workers but no help hence my question here on stack-overflow.
Is there a way to un-unglify scripts in production on the fly to debug or
some configuration that toggles to use uncompressed files for debugging and compress files after the job is done.
You guys gave me some amazing approaches. Thanks
If there are some more ways kindly please do share.
Don't debug minified code without source maps. You'll go crazy if you don't. Also, can't you rebuild the code instead of trying to fix minified code?
I use Chrome, but I'm sure FF has a similar tool:
That little brackets button at the bottom of the script panel prettifies on the fly. Works whether the code is sloppy or full-on minified.
It's a good solution for quick-n-dirty, but you will run into problems if you rely on it. Source Maps are recommended. See #Kosch's answer for a decent write-up. funny, we posted identical links

ASP.NET / VS2010 Finding unused files in project

Folks, is there any smart way to easily find unused files in entire solution? My project was consolidated by previous developer and it gained size at least 3x. I'd like to shrink the size of project but I cannot find quick and easy way. Any advices?
This open source project might be a good place to start. It's meant to filter out unused images, but it should be pretty easy to change so it looks for unused files.
Find unused images in VS Web Projects
How about writing a program to do it? Could be a neat little project for a junior dev to write for you.
I think finding unused code is a job for a static analysis tool. As #kiru mentioned, Reshareper has this functionality and it is easy to use. They also offer a 1-month trial version.
The extension in the selected answer above only works in vs2012 while Code Maid works in vs2010 - vs2014:
There is a free extension called Code Maid that "is an open source Visual Studio extension to cleanup, dig through and simplify our C#, C++, F#, VB, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript and TypeScript coding." Does images as well.

Any good tools to automate js script combining?

I use visual studio 2010 for writing javascript and jquery. Are there any fast and easy ways to automate script combining? It doesn't have to be tied to Visual studio, any method that is simple and easy to setup will do.
THanks
SquishIt
The Friendly ASP.NET JavaScript and CSS Squisher
Try require.js. The nicest feature is that you can combine your dependency scripts at any point in your project lifecycle without any modifications required to your includes.
Give chirpy a try, lot's of nice visual studio integration. It will minify, uglify and mash them. It also handle css, less and coffeescript. Hopefully sass will be supported sometime soon ;-)

Categories

Resources