How to work with JavaScript in development then live

Question

I work on front end development and am looking to find a solution for working with javaScript between (non compressed and multiple files) development environment and (compressed and combined files) live environment.

I have found a solution with CSS which means that I only need to include one global CSS file with imports, then we combine and compress those imports when deploying to a live environment. This means that we don't have to toggle adding references in to the head for dev and live.

Any ideas on a similar solution for JavaScipt?

Thanks

Dave

Answer 1

If you are using jQuery it's really easy to include external Javascript files from within Javascript which is basically what you described you did with CSS.

Read up on jQuery getScript()

Answer 2

You can use Charles Web debugging proxy. Or smth similar.

Charles allows to give any local file instead of any url. So you can give your browser your local JS file instead of live JS. Thus you will be able to test JS or CSS changes without showing them to your users.

Answer 3

I use ESC to merge and compress all the independant JavaScripts to a central one, and have it run as a 'post build' task.

Answer 4

For Visual Studio I wrote a small console application I wrote (like ESC as someone mentioned) that is used as a post-build event. It's simple but automates the job you're describing by:

• Taking a list of filenames as its arguments
• Compressing each one using Crockford's JS compressor
• Combining the output into one .js file

Then in the site project, the file is loaded from a resource, and a toggle is performed in a class

List<string> files = new List<string>();
#if DEBUG
   files.Add("MyNamespace.Javascript.script1.js");
   files.Add("MyNamespace.Javascript.script2.js");
#else
   files.Add("MyNamespace.Javascript.Live.js"); // single file
#endif

// ScriptManager.Register them

You could also enable GZIP compression on the JS files for even faster load times. If you're not using the Microsoft dev environment then I'll delete this.

Answer 5

I don't know how your dev environment looks like but you could put all the script tags into one file for development and have another for production that has the script tag for your one single file. For example: development_js.extension and production_js.extension.

Then it's just a matter of either using server side include or some build tool to merge the correct file into your html file.

Answer 6

Thanks for all your responses. I have come up with a solution which uses some of your ideas.

i have a global js file which has a list of files to include and when run during dev just writes the script links to the page.

Then included in the deployment process is a script which parses the global js file, looks up which files it is linking together, combines and compresses them in to one global js file.

This means that I don't need any server side code during the process which makes things easier to maintain across a team of freelance front end devs.

i'll post the final bunch of code when it's ready on my blog.