javascript - Combine source maps of two compilation steps

Question

I've got a two-step compilation process for my web application. Firstly, I compile CoffeeScript files into JavaScript files [1]. Then the JavaScript files (both ones that come from CoffeeScript, and external ones, like produced from AngularJS templates by grunt-angular-templates) are compiled by Google Closure Compiler [2] into a single minimized file.

CoffeeScript ---[1]---> JavaScript --[2]--
                                           ->
AngularJS templates --> JavaScript ----------> single minimized JS file
                                           /->
                    other JS files -------/

Both steps [1] and [2] produce source maps.

Is it possible to combine these source maps into a single source map that would allow me to debug CoffeeScript files from a web browser that runs the minimized JS file?

In other words: let say the source map [1] is represented by a function:

f(position in CoffeeScript) = position in JavaScript

and the source map [2] is represented by a function:

g(position in JavaScript) = position in minimized JS

I'd like to get a source map which is represented by a function composition:

h(position in CoffeeScript) = g(f(position in CoffeeScript)) = 
                            = position in minimized JS

Answer 1

Try sorcery - it's designed for exactly this purpose (I'm the author, I came here looking for info on related tools). As long as the .map files are in the correct location (or inlined as data URIs), you just run sorcery on the generated file and it will locate the intermediate sourcemaps and compose them.