Any good tools to automate js script combining? - javascript

I use visual studio 2010 for writing javascript and jquery. Are there any fast and easy ways to automate script combining? It doesn't have to be tied to Visual studio, any method that is simple and easy to setup will do.
THanks

SquishIt
The Friendly ASP.NET JavaScript and CSS Squisher

Try require.js. The nicest feature is that you can combine your dependency scripts at any point in your project lifecycle without any modifications required to your includes.

Give chirpy a try, lot's of nice visual studio integration. It will minify, uglify and mash them. It also handle css, less and coffeescript. Hopefully sass will be supported sometime soon ;-)

Related

ASP.NET / VS2010 Finding unused files in project

Folks, is there any smart way to easily find unused files in entire solution? My project was consolidated by previous developer and it gained size at least 3x. I'd like to shrink the size of project but I cannot find quick and easy way. Any advices?
This open source project might be a good place to start. It's meant to filter out unused images, but it should be pretty easy to change so it looks for unused files.
Find unused images in VS Web Projects
How about writing a program to do it? Could be a neat little project for a junior dev to write for you.
I think finding unused code is a job for a static analysis tool. As #kiru mentioned, Reshareper has this functionality and it is easy to use. They also offer a 1-month trial version.
The extension in the selected answer above only works in vs2012 while Code Maid works in vs2010 - vs2014:
There is a free extension called Code Maid that "is an open source Visual Studio extension to cleanup, dig through and simplify our C#, C++, F#, VB, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript and TypeScript coding." Does images as well.

Good folding/indenting for Rails.js.erb for Javascript/Jquery in Vim?

I'm fairly new to vim/Macvim and am wondering if someone could kindly direct me to a plugin or resource on getting good indenting and folding in Vim for ruby on rails javascript erb files that are a mixture of javascript+jquery which have some server-side calls mixed in.
I know it's a tall order with essentially 3-syntaxes being intermingled but I'm guessing someone's already solved this beast.
Thanks!
I had issues with Vim/MacVim and Ruby compatibility. The first time, I installed using Homebrew and ended up scrapping that version and compiling Vim from source. It's more work but you can specify the language support that is compiled and things work much better. This post has a good step-by-step guide on compiling Vim on Mac. Try that and then see if you still have issues with js.erb files
Depending on how the file is written you may be able to fold on indentation level. This can be done by passing ":set foldmethod=indent" while in a ViM file. More information on ViM folding can be found here: http://vim.wikia.com/wiki/Folding

Packaging JavaScript & CSS

I was tasked with figuring out how to package JavaScript and CSS into one file per each. We have a java servlet application and we use JQuery if that makes any difference. We use ant to script our builds, so easy integration with Ant would be nice. We want to do this to reduce caching issues and to reduce number of requests to the servlet.
I found few tools out there, but not sure what are pros/cons of each. Here is the list so far:
JAWR (http://jawr.java.net/)
Juicer
(http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool)
JSBuilder2
(http://www.sencha.com/products/jsbuilder/)
JSLint
(http://code.google.com/p/jslint4java/)
(JavaScript only)
Quilt
(https://github.com/kitgoncharov/quilt)
(JavaScript only)
Do you guys have any recommendations, warnings, advices? Or maybe a better tool/framework?
Thanks in advance!
For JavaScript, the closure compiler integrates with Ant. It can concatenate and minify your JS. You can also use YUI compressor. Here's an example of using YUI compressor with Ant for JS and CSS.
By far my favorite template is HTML5 Biolerplate The build script there is pretty good as a template.
Also, versioned files with long cache times will greatly improve load times.
Replace "being nice" with "a must". You absolutely want something that integrates with your build tool since you do not want to minimize your files manually again and again and again and again and again and again and again and again and again and again.
Jawr - very nice library, makes everything for you, simple to integrate (at least with its Grails PLugin).
The small problem, I havn't found a way (may be it exists) to integrate ALL bundle's dependencies in a single file. (if you don't have dependencies between bundles (modules), you won't regret this decision).

How to work on Javascript projects?

I am trying to write my own Javascript Framework something like jQuery.
I use Aptana Studio for designing websites. I was planning to create a web page and write the Javascript code just as we would do for a website. Then I noticed that Aptana Studio also has a Javascript Project. So I created a new Javascript Project. But it primarily allows you to create only .js files and no HTML files. I wonder what a standalone .js file would do? Would't I need an HTML file to execute and test my Javascript code?
Certainly there must be some advantage to using the Javascript Project. But I am not able to figure it out. Can someone please explain how to use the Javascript Project?
I don't know anything about Aptana Studio, but I'm guessing that you're intended to drive your JavaScript project from another project. Think of the JavaScript project like a self-contained library. It doesn't make sense to include the test code in the library itself, because consumers of the library probably don't want to deal with it. Try creating a second project that imports your JavaScript project and allows you to play with it and test it.
I would recommend that you try Javascript-Test Driver. It has an IDE support and also it seems to be fairly good at helping you debug code. Find more details here:
http://code.google.com/p/js-test-driver/
I would say that while you DO need HTML files; you'd probably wanna do more according to the testing framework you choose; as some work with fixtures other loads up iframe and stuff. But I would presume that writing a whole framework would take more than just HTML pages and a unit testing framework would be more apt for the req.
Screw Unit for JS
http://github.com/nkallen/screw-unit
I know I have deviated from your question; but I just felt that rather than right project structure and HTML for testing what would be more important is a testing framework that keeps development agile and fast.
But that's just me.

What do you do to your JavaScript code before deployment?

Do you have a step in your deployment process that minifies JS? Do you have any sort of preprocessor for your JavaScript that allows you to leave in comments and console.logs and then have them automatically stripped out? Is your JavaScript machine generated by GWT or Script#? Do you use ANT or another tool to automate deployment?
I see a lot of JavaScript that looks like it comes right out of the editor, complete with lots of white space and comments. How much of that is due to not caring about the state of the deployed code, and how much is due to the spirit of the open web?
I usually check it out with JSLint to make sure it is bug-free, then pack it/encode it with YUI compressor.
My steps include:
I write Javascript using TextMate with the Javascript Tools bundle installed. This JSLint's my files on every save and notifies me when errors occur.
I use Sprockets to automatically concatenate my various Javascript files.
I run the resulting concatenation through jsmin to generate a minified version.
I end up with a concatenated lib.js file and a minified lib.min.js file. One I use for development, one for production. TextMate commands help automate it all.
I'm still looking for a good solution to actually (unit) test my scripts.
Check out YUI Compressor its a console app that you can use to minify (strip out comments, whitespace etc..) and also obfuscate your javascript files.
JSMin it from Douglas Crockford. We've got it hooked up as a macro in Studio as well as a post build item for some of our larger projects
FWIW, here's an interesting mini-benchmark on various ways you can minimize your Javascript source:
http://www.ericmmartin.com/comparison-of-javascript-compression-methods/
In short:
gzip compression in HTTP protocol really makes a difference (although you need to pay a CPU cost at the server side)
minification (removal of whitespace/comments, change of variable names etc.) also helps, and if you want best result, use it together with gzip compression
js-based decompressors are most likely useless - while you might get smaller size, the CPU overhead on the client is significant.
For one of our products, we concatenate all Javascript files together (most files are used on most pages, so this makes sense for us) and use Javascript::Minifier. This has given us a pretty nice speed boost.
A lot of it is probably due to not caring about people that might be viewing your pages on slower machines with slower connections and assuming that everyone has a 50Mbps line and three Gigs of RAM.
We are minifying our (hand-written + plugins, jQuery, etc.) JS as a part of the build process in .NET environment. No preprocessor, this is something we should definitely be doing once time permits.
P.S. By the way, we're not using console.log, as this will break IE. Instead we have a simple wrapper function, something like:
function log(stuff) {
if (window.console && window.console.log) {
console.log(stuff);
}
};
I have a PHP script that does it on the server side and keeps a cache of whatever it pulls from the source folder(s).
One word- packer
Light a candle, whisper a prayer against IE6 errors, and click "go". Does that count? :)
I don't minify my own javascript code since text tends to gzip/compress well.
I would minify a very large (say > 100 kb) javascript library (but then again I probably would not want to be using such a large library (or just ship what i use)).
I tend to believe that a lot of the javascript-minification is (in reality) done to achieve some sort of (futile) obfuscation of javascript code instead of the proclaimed end-user performance gain.
There's also a .NET port of YUI Compressor which allows you to:-
intergrate the minification/file combining into Visual Studio post-build events
intergrate into a TFS Build (including CI)
if you wish to just use the dll's in your own code (eg. on the fly minification).
I thought I would share my approach to js deployments. Have a look at this blog post:
http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx
This also includes code to compile (using google's closure compiler) at runtime (when needed).
Thanks Guido

Categories

Resources