Rails 3.1 obfuscate javascript - javascript

With Rails 3.1, the sprockets gem was introduced. I have written a very large game engine in javascript/coffeescript which I plan to release as open source software in the future, but at the moment, I would like to obfuscate the code to build a small barrier for people trying to cheat in the game. My question is:
What do I have to do to create an obfuscated version of the application.js file which was created by combining all my js files? Is there a best practice, a gem or it is even possible at all?
Thanks for your answer.
Tom

You could try dojo's ShrinkSafe - it will minify/obfuscate yoour sources and you can configure it to generate one single file out of several input source files.

Well, you could use Closure Compiler with advanced optimization, although I would recommend against it:
http://edgeguides.rubyonrails.org/asset_pipeline.html#javascript

Related

compressing .js and .css files on push of the website

I am not even sure if something like I want is possible, so I am asking you guys to just let me know if anyone did that before. So, my goal is to when I click on "Publish" website in VS2010, to have all javascript files compressed into one, same with css and then in my layout file change the references from all different js and css files to only those two merged ones. Is that doable? Or maybe it's doable but in more manual way?
Of course the goal here is to have only two calls to external files on the website, but when I develop I need to see all files so that I can actually work with it. I guess I could do it manually before each push, but I'd rather have it done automatically using some script or something. I didn't try anything yet, and I am not looking for ready solution, I am just looking to get to know the problem better and maybe some tips.
Thanks a lot!
This is built into ASP.net 4.5. But in the mean time, you should look at the following projects
YUI Compressor
The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.
Cassette
Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
RequestReduce
Super Simple Auto Spriting, Minification and Bundling solution
No need to tell RequestReduce where your resources are
Your CSS and Javascript can be anywhere - even on an external host
RequestReduce finds them at runtime automatically
SquishIt
SquishIt lets you squish some JavaScript and CSS. And also some LESS and CoffeeScript.
Combres
.NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.
Chirpy
Mashes, minifies, and validates your javascript, stylesheet, and dotless files. Chirpy can also auto-update T4MVC and other T4 templates.
Scott Hanselman wrote a good overview blog post about this topic a while back.
I voted up the answer that mentioned Cassette but I'll detail that particular choice a little more. Cassette is pretty configurable, but under the most common option, it allows you to reference CSS and Javascript resources through syntax like this:
Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");
You would then render these in your master or layout pages like this:
#Bundles.RenderStylesheets()
#Bundles.RenderScripts("first")
#Bundles.RenderScripts()
During development, your scripts and styles will be included as individual files, and Cassette will try to help you out by detecting changes and trying to make the browser reload those files. This approach is great for debugging into libraries like knockout when they're doing something you don't expect. And, the best part, when you launch the site, you just change the web.config and Cassette will minify and bundle all your files into as few bundles as possible.
You can find more detail in their documentation (which is pretty good though sometimes lags behind development): http://getcassette.net/documentation/getting-started
Have a look at YUI compressor # codeplex.com this could be really helpful.
What I have done before is setup a post-build event, have it run a simple batch file which minimizes your source files. Then if you're in release mode (not in debug mode), you would reference the minimized source files. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode
I haven't heard about publish minification. I think use should choose between dynamical minification like SquishIt or compile time like YuiCompressor or AjaxMinifier.
I prefer compile time. I don't think it's very critical to have to compile time changing files. If you have huge css/js code lines you can choose this action only for release compilation and if it helps publish this files only in needed build cinfigurations.
I don't know if there is any possible way to somehow hook into the functionality from that 'Publish' button/whatever it is, but it's surely possible to have that kind of 'static build process'.
Personally I'm using Apache ANT to script exactly what you've described there. So you're developing on your uncompressed js/html/css files and when you're done, you call like ant build which then minifies, compresses, stripes and publishes your whole web application.
Example script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml

Can I use YUI compressed when building ASP.NET projects in VS2010

I want to minify java script files in my vs2010 web app ASP.NET solution. I know that YUI compressor can do it pretty well on its own. So I was wondering if I can do the following:
I have all JS files in the Scripts folder in my solution.
JS files are included into aspx pages as follows:
<script src="Scripts/scripts.js" type="text/javascript"></script>
It would be nice to minify the 'scripts.js' file when building "Release" configuration, as well as when I'm publishing my web app.
Can someone explain here how to automate it all in VS2010?
Microsoft actually has a pretty good solution for this. You can read about it here.
competent_tech's answer would achieve your objective by using the Microsoft Ajax Minifier in an MSBuild Task. The Ajax Minifier is another minification tool that essentially does the same thing that the YUI compressor does. Its performance and optimized javascript and css are very comparable to the YUI solution.
If you are specifically interested in a YUI Compressor option, check out http://yuicompressor.codeplex.com. This is a .net port of the YUI Compressor and also provides a MSBuild Task solution.
Lastly, I'll recommend my own OSS project, http://RequestReduce.com. This will crunch and combine your css and javascript at run time. It caches them and serves them using far future expires headers and customized ETags. Additionally, it can automatically sprite your background images. The nice thing about this is that it requires no codeor configuration for basic functionality. It can dynamically find your css and javascript files.
RequestReduce does use the ajax minifier but allows you to plug in your own minifier pretty easily. The wiki at https://github.com/mwrock/RequestReduce/wiki has sample code for accomplishing that.

A javascript development tool that merges several files into one

Some time ago I saw a javascript library/development tool that takes several .js files (or modules, for that matter) and "compiles" it into one .js file. The goal of this tool is to facilitate the client-side development.
The sad thing is that I forgot the name of this tool. Does anyone knows the name of this library/tool (or some tool like this)?
You are possibly thinking of Chirpy?
Mashes, minifies, and validates your
javascript, stylesheet, and dotless
files. Chirpy can also auto-update
T4MVC and other T4 templates.
Chirpy is chippy. Use Google Closure
Tools, YUI Compressor for .Net, Ajax
Minifier, or Uglify.js to minify and
mash all of your precious assets. It's
easy, it's flexible, and it's
automatic.
Chirpy also flirts with T4. Auto-run
your T4 templates. Smart-run your
T4MVC template. Make your friends and
family members uber-jealous.
NEW Chirpy now supports CoffeeScript!
I really don't know what IDE you saw in the past.
But it can be done with Visual Studio 2010 with Build Events.
Take a look at this thread for more explanation and other ideas: Visual Studio 2010: Publish minified javascript files instead of the original ones. Other options here: Compress CSS/JavaScript before publish/package.
I know of two tools that do this. They each take different approaches.
Yahoo's YUI Compressor simply combines files, removes whitespace, and doesn't actually affect readability much. It reduces file size a little.
Google's Closure compiler actually "compiles" JS by simplifying certain types of expressions, rewriting variables, etc. Reduces file size a lot.
The Closure compiler doesn't give you easily-readable code, but it does the best job of reducing file size of these two. It also has various compilation optimizations that you can use. The YUI compressor page links to some more types of compressors that they replaced.
Both tools use a Java JAR file that accepts input files and an output file, which you can run before uploading your Javascript.

How should I start a new JavaScript project (Testing, Developing, Building)?

I've developing JavaScript since many years but have never really thought about the whole testing, developing and building stuff - but I realized it's pretty much necessary. We've just used a Subversion repository with simple release tagging (switching to git soon). As a new bigger pure JavaScript project (using jQuery) is arriving soon, I'd like to optimize the whole process.
I already did some research but never found a good starting tutorial.
It's definetly a good idea to split classes and separate code blocks into several js-files and not a big one (as Prototype or jQuery do it). These js-files must be "build" into a single file. How do I achieve that?
It's pretty much necessary to Unit-test the stuff me and my colleagues are coding. I found the js-test-driver which has an eclipse plugin that seems to be doing his job quite good. If my developer-folder contains all these src- and src-test-files, how do I integrate this in the building process?
For testing, take a look at this: https://stackoverflow.com/questions/32809/javascript-unit-testing
For merging all of your JavaScript into one file you can use something like YUI Compressor. You need to be looking for a minimizer first, compression second. A minimizer just takes the files and merges them together and gets rid of whitespace. A compressor will actually try to optimize the js for you by changing variable names and removing unnecessary code.
As for unit testing I am unsure of how you will want to do that. There are a few unit test libraries out there. A popular tool for testing is Selenium. I don't currently do unit testing so I am out of my element there..
For setting up your code you could always look at using a JavaScript framework like ExtJS or JavaScriptMVC. Those help you with setting up your code in the proper way and also helps focus your team on the proper standards and coding structure while also writing a lot of the code for you so you don't have to re-invent the wheel.
EDIT: Just a quick after thought. Even if you don't want to use a JavaScript framework, I would suggest checking them out, especially ExtJS, just to see how they organize their code and some of the tricks they do to keep it clean.
I'll answer part of your question:
These js-files must be "build" into a
single file.
This is possible only with server side language - in ASP.NET you have built in tools for that, otherwise build your own "merger" server side file and reference that file instead of the actual .js files.
These js-files must be "build" into a single file. How do I achieve that?
Definitely keep your files separate in version control, and only merge them during the build process.
The YUI compressor mentioned elsewhere is a java-based tool that will not only merge but -- of course! -- compress your files for faster download.
If you just want a simple merge of files, a simple Perl or bash-script (or other preferred scripting language) could concatenate multiple .js files into one for release -- just make sure that the build script also updates all HTML in the release to reference only the single page.

Make javascript file to min version [duplicate]

This question already has answers here:
Closed 13 years ago.
Possible Duplicates:
How to organize minification and packaging of css and js files to speed up website?
What do you use to minimize and compress JavaScript libraries?
Hi there
Do you know any tool/method which can help me to minimize the size of a javascript file?
There are a number of online tools available for minimising your javascript. The following tools all require a download and to be run on your machine:
YUI Compressor
JSMin
ShrinkSafe
These tools allow you to paste in/submit your javascript online and get a minimised version back without having to run any programs on your machine:
Packer
JS Minifier
One potential issue with minimising your javascript is the need to keep a minimised version in your codebase for deployment, and an expanded version for development/maintenance. One way around this is to have your webserver look after compression and minimisation of the files in question. This may lead to some additional overhead on your webserver, but you can address this via cache lifetimes etc.
For Apache, Apache2::Response::FileMerge handles this, and can use JavaScript::Minifier to do the actual minimisation.
On nginx, NginxEmbeddedPerlMinifyJS will do much the same thing.
There are two that I know of:
JSMin
YUI Compressor (Java version, .NET version)
The YUI compressor is slightly better in that it will compress CSS too. The .NET version can be integrated with MSBuild.
I have been using JavaScriptMVC for a while, which has a built-in function to combine and compress all javascript files. But it's actually a complete framework to structure your code.
There are a lot of minifiers on the market. Here are three:
MinifyMe
Dojo also has a compressor
Compressing with JavaScriptMVC
The great benefit of JavaScriptMVC and Dojo is that they don't use Regular Expressions to perform compression. I don't know about the other ones. Compression by using regular expressions can sometimes lead to errors in your compressed/minified Javascript code and is kind of brittle
Other answers mention various tools to minify your Javascript/css.
however, don't forget you can also GZip your javascript/css, as demonstrated here for isntance - either manually or using some preparation stage when you deploy, or by using mod_gzip or an equivalent.
I'm successfully using the YUI Compressor.
I like JavaScriptCompressor.com simply because it's online and doesn't need any software to be downloaded or installed.
Check out this site. It compares different JavaScript compression utilities on the fly.

Categories