Use Xcode as Javascript IDE, possible?

I'm working on a Javascript-intensive web app designed to run on iPhone/iPad for now. It also works on all Webkit browsers (Safari + Chrome).

I have a home-made MVC framework consisting of many JavaScript files: one for each view, one for each controller, many "helper" classes.

I also have a bunch of LESS files, one "main" including each LESS file for each view (eg. if I have a UIListView.js, I also have a UIListView.less).

Currently I'm working with MacVim and Less.app, and doing tests on both iPhone/iPad simulators, real iPhone/iPads, and sometimes Safari or Chrome when I really need to do "hardcore" debugging with the developer tools. All my files are stores in my ~/Sites/projectX folder, which I browse using my Mac's built-in web server.

This is OK while developing, I have many little files referenced by my index.htm but it doesn't matter as I'm on my intranet over WiFi.

What I'd like to achieve is a more "project-oriented" approach. Just as when I develop an iOS project in Xcode, I'd like to use XCode for all my development needs, keep all my source files in a directory separate from ~/Sites, say ~/Desktop/projectX. I'd like to have two configurations (debug and release) to use with "Build and run" :

the "debug" config would simply compile the main .less file (which includes all small .less files), copy the JS + CSS + HTM file over to some directory (~/Sites/projectX_debug), along with all graphic resources. Then depending on the "sub-configuration" chosen, launch either the iPhone Simulator, the iPad Simulator, Safari, or Chrome, clear its cache (via AppleScript?) and open the index.htm
the "release" config that would glue all JS files together and minify them, compile and minify the .less file, change the index.htm to reference only the glued JS, then optimize all PNGs with pngout/pngcrush/whatever before sending all the archive to a local directory (~/Sites/projectX_release) or by sftp to my production server.

I believe I can achieve if not all but most of this using the build phases of XCode 4, maybe using GNU makefiles or some kind of preprocessor, but I'm lost at where to start.

Does someone already have this kind of setup for using Xcode to do something else than Mac/iOS development, but still using the "classical" concept of build phases/makefiles traditional to most IDEs?

(An acceptable workaround would be to simply create a bash script to handle that — I can already manage it by myself, but I'd really like to use the integrated XCode features, and just pressing Cmd-R to "compile" and run my project in debug mode).

Solution

I will try and step through the things you should do...

the "debug" config would simply compile the main .less file (which includes all small .less files),

I would create a build rule to handle .less files, use a script to compile them.

copy the JS + CSS + HTM file over to some directory (~/Sites/projectX_debug), along with all graphic resources. Then depending on the "sub-configuration" chosen, launch either the iPhone Simulator, the iPad Simulator, Safari, or Chrome, clear its cache (via AppleScript?) and open the index.htm

For this you just need to add your files to the copy phase in the 'Build Phases' section.
You can set your build directory in your target's 'Build Settings' section (~/Sites/projectX_debug, if you'd like).

the "release" config that would glue all JS files together and minify them, compile and minify the .less file, change the index.htm to reference only the glued JS, then optimize all PNGs with pngout/pngcrush/whatever before sending all the archive to a local directory (~/Sites/projectX_release) or by sftp to my production server.

For this part you might want to create a new target and add different rules and settings.

If the above is too complicated:

Write your two bash scripts.
Make two targets.
Add your bash script as a build phase in each target.

Hope that helps.