We Keep Coding

how to manage javascript or front project

In our project, we want to add a new javascript project include javascript and css, it is an front size project, and there are many module js which will be merged into main js, at the same time, the main js will be compressed into a *-min.js just like jquery. but now all the process is manually and easy to get mistake. may I know is there a tool or eclipse plugin to handle js project like this? or is there any better manner to process? thanks.

If you were asking for javascript ide, try http://www.jetbrains.com/webstorm/

Check out http://closure-compiler.appspot.com/, which also has a downloadable jar and REST api

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.

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.