I noticed that the production version of jquery has one-letter function and variable name and was wondering how they achieve that. are there tools to create a production level javascript file from the one use during development? I am having a hard time figuring out how they make sure there are no mistakes, especially for an open source project that big.
JavaScript minfiers do this for them. Two good ones that shrink private variables names are YUI Compressor and /packer/.
You would use one of many JS minifiers like JSMin or Google Closure Compiler to achieve such results.
It's called "minification" or "packing" and there's a lot of different tools which can do it for you, for example: Dean Edwards's Packer or YUI Compressor
I think you refer to JS minification, like YUI Compressor
http://developer.yahoo.com/yui/compressor/
Related
Good morning, is there a precompiler solution for JavaScript like Sass for CSS ?
The only features I need are the partials precompiling (to have fewer js files) and the auto-compression of the file.
I googled for Coffeescript but it's not what I'm looking for and because I don't want a different syntax..
If is there a software like Koala for Sass would be appreciated but even from command line (I'm on Windows) is ok, thank you in advance!
PS: with partials I mean:
#import "file.js"
The tool find this and replace it with the content of the file, creating a new file, maybe in another folder specified by me (As I said, like Koala)
Javascript is directly interpreted by your browser so there is no "partials precompiling" stuff.
What you are looking for is a task runner like Gulp or Grunt that can launch a task (amongst others) that will concatenate your files.
Here is a concat task for Gulp
When you say "precompiled" you mean "concatenate and minify", yes they are technically different because the "compiled" code is still in JS, but they are essentially the same thing.
Google has a tool call Closure "Compiler" that is probably what you are looking for.
Found this answer, by Andy Tran, to the question "What are the HTML and JavaScript equivalents of Sass?":
I’m sure there are plenty of options but I’ve only heard of
CoffeeScript, TypeScript, Babel, and LiveScript.
[...]
CoffeeScript does create some shorthand versions of certain things aimed to make it easier to read/write, but in my opinion, I found it just to be more messy.
Babel was the second that I picked up and I immediately loved it. Babel
allows you to write the newer version of EMCAScript (ES6, ES7) but
compiles it to plain old JavaScript to support older versions browsers
and IE that doesn’t support have support for it.
TypeScript and LiveScript, I’m not familiar about. However, I’ve heard a lot of
positive feedback on TypeScripts and everyone been recommending me to
check it out and use it instead of CoffeeScript!
Hope it helps!
I use Dreamweaver for development, mostly PHP, html, css, javascript. Is there anyway to break up JavaScript files? or maybe a better IDE that makes it easier to work with? It just becomes quickly difficult to read and find what I'm looking for.
Thank you!
Intellij and/or Webstorm by Jetbrains has the best JS tools I have found. It has very good (as good as it gets, for JS) intellisense (autocomplete for variables and methods) as well as refactoring for variables and methods. You can cmd+click into method definitions from anywhere, as well. Unfortunately you need to pay for them, but if you are using Dreamweaver you had to pay for that. If you are only doing html/css/javascript Webstorm is the way to go.
Yes, you should break up your javascript files into relevant parts just like you break up your php files into relevant parts. The one key factor here is they should be combined and minified before being served up to the browser so the user does not have to make several network calls to your server for each .js file.
Check out Google Minify for an easy solution to that issue.
Take a look at the JQuery source to see how they divvy up their files. Now look at their combined framework, and of course their minified framework. What is actually served up to the user looks nothing like the source.
Uh, Dreamweaver?
Definitely use a different IDE. Aptana won the poll here :)
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.
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.
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.