After using grunt.js to minify my code, how would I beautify the code again and restore the variable names (as if I had never minified it in the first place)?
I have found a lot on here about jsbeautifier.org but that doesn't help me if I need all the variable names restored
Generally you probably want to save a copy of the original (un-minified/ un-uglified) code, but if you do need to revert back from minified code you could use source maps. Check 'em out here.
The purpose of minifier is to obfuscate the code. You don't want to be able to unminify a minified file.
You want to keep the original file and you can also generate a sourcemap that'll link the minified file with the original.
Related
I try to add a header to every js-file in my project.
The current files are without comments in header.
I want a gulp-task to insert following header to the files:
/*
* New Comment from Gulp-Task
*/
Is there a plugin, already ?
Gulp-Inject is maybe the solution, but I don´t know, how to use it for javascript injection.
This is not a straight answer to your question as it requires some translation to your case, but here is a post on how to update version numbers (in your case, something else) within javascript files.
How to Increment Version Number via Gulp Task?
The second part to this answer is where you'll find your clue.
I found the solution that work for me:
gulp.src(['./**/*.js'])
.pipe(insert.prepend(license))
.pipe(gulp.dest('./'));
It prepend a license head to every .js files in this directory and sub folders.
Is it possible to get a proper JavaScript source file if I have the minified file and its corresponding source map?
I know how to prettify JS code (line-breaks and indents), but I would like to get original function / variable names in the file, to be able to better understand the source code.
I would like to get the un-minified JS file to work with, instead of using it to debug in a browser.
PS It is probably somewhere right under my nose, but I didn't manage to find it so far. Sorry if this was already asked!
To work sourcemaps requires both files, minified and original, often original is included in sourcemap file(it has optional sourcesContent for sources that can not be hosted).
Sourcemap is just JSON file, and you can found all needed information inside:
sources - list of source file names,
sourcesContent - optional list
of original sources, if source is not presented it would be null
here.
Utility script, I have written before for this purpose: https://gist.github.com/zxbodya/ca6fb758259f6a077de7
I suggest using the Source Map Visualization tool online to view the original code with both js file and js soucemap file.
https://sokra.github.io/source-map-visualization/
I think you won't be able to completely revert such code to its original state as a lot of information (for example comments or certain variable names) is simply lost in the process. When I understand it correctly for sourcemaps to do this you still need the original file.
If you only aim to prettify the code so its readable again you do not need source maps. Many advanced editors have such functions. For example if you are using Sublime text there is this plugin: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify which does a great job.
Also see this similar question: How can I debug a minified JS in firebug?
All the variables after minifications are defined just with one or two letters. Is there any tool or technique which can help finding the right variable I am looking for in the javascript code?
For example, I found google doodle soccer game: https://www.google.com/logos/2012/football-2012-hp.html and now I try to find the variable there the score or final score is saved. So I can make the highscore table for the game.
Any tip is welcome.
There is a nice tool called jsnice
What is JSNice?
JSNice is a new kind of statistical de-obfuscation and de-minification
engine for JavaScript. Given a JavaScript program, JSNice
automatically suggests new likely identifier names and types.
jsnice is different to other 'javascript beautifiers' in the fact it does not only formats the minified code, but is also predicts meaningful variable names.
Generally you want to avoid working with the minified source. Try to find the original uncompressed source with the full variables names.
I have never been able to successfully make changes to a minified Javascript file. My Javascript skills are pretty good but minifiers make it very difficult to work out what the code is actually doing.
Source Maps are newer thing that help solve this problem: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/. But unfortunately in your case this will probably not work as Google has not provided a source map.
If you are forced to make changes to the minified source, try using some like http://jsbeautifier.org/ as #Mustafa_sabir suggested. Then try to figure out what each of the variables are. You could then either remember what they do or try renaming to something more meaningful.
Good Luck!
There is no way to recover Minified Javascript variable names unless the Javascript code or library have a map file to decode the original code in the Inpsector view of the browser.
In your example, It is not possible.
I just minified a script using this tool and noticed the line "The code may also be accessed at default.js". Here's a pic:
How long will this link stay good for? Is it safe for me to use this in my script tags?
To use the optimized code, you can cut and paste it into your source file, download the file into your directory, or link to the file directly in your script tag (for up to one hour).
This is from the help page on the link you posted.
I have a big javascript file common.js
with all my functions and stuff...and i would like to write a separate file Js
to store only the definitions for all the alert/courtesy messages etc
spread along the file...i don't want to seek and change one by one...
i have created something like this in php, where I have my file, en.php / fr.php /de.php for each language i need...
i was wondering:
1. if i can do the same in Js
2. if there is any way to use the php instead...so woudl be even better to have just one and only file to edit
thanks
Sure -- all you need to do is to create a definitions file for each language that just creates an object with the needed name: value pairs. Your existing JS can then insert defsObject["name"] wherever needed. Your PHP would then determine which of the JS definition files to load by changing the src value of the script tag.
If you are unfamiliar with the object notation, there's loads of examples available on Stack Overflow (tagged JSON).
I don't believe there's a satisfying way using js to include the definitions.