Obfuscate CSS and Javascript for free

Question

Good afternoon guys, I am developing a page and would like to obfuscate the CSS and Javascript(Angularjs), I did a quick search on the internet and saw some paid tools, and some Free tools made the obfuscation very basic way being possible to manually return the original properties for reading and also very limited as letting obfuscate 10 files at a time etc.

Is there any simple, free and effective way?

Answer 1

For JS the two tools I used directly are: Uglifyjs and Google Closure Compiler.

Both go beyond a simple substitution of variable names. They analyze code and can produce an even smaller version of your code by detecting dead functions or blocks (unattainable.)

Nowadays, in most cases for me, I no longer use these tools directly. They end up being invoked as part of a pipeline. Like, I write my code in ES6, hence something like this: *.js (ES6) ➔ Webpack ➔ Babel ➔ *.js (ES5) ➔ Uglify ➔ combinação (bundling) ➔ browser.

For CSS, it’s hard to overshadow because the class names need to be the same as in your HTML and JS. Still you can compress a bit. In the past I used the YUI Compressor but today I also leave it all on account of a pipeline. I write my stylesheets on LESS and then: *.less ➔ Webpack ➔ lessc ➔ *.css ➔ minificação ➔ combinação (bundling) ➔ browser.

Some of the above items are harder to use with Angular 1, especially Webpack. But you can delete them or look for alternatives.