`Create or find files with source maps`

../node_modules/typescript/bin/tsc --sourcemap hello.ts

../node_modules/coffee-script-redux/bin/coffee --js -i goodbye.coffee > goodbye.js ../node_modules/coffee-script-redux/bin/coffee --source-map -i goodbye.coffee > goodbye.js.map

curl --remote-name-all \ http://code.jquery.com/jquery-1.9.0.js \ http://code.jquery.com/jquery-1.9.0.min.js \ http://code.jquery.com/jquery-1.9.0.min.map

`Strip source map urls`


sed -i '.bak' '/sourceMappingURL/d' hello.js goodbye.js jquery-1.9.0.min.js
Concatenate JS files

cat hello.js goodbye.js jquery-1.9.0.min.js > hello-goodbye-jquery-min.js
Concatenate source maps

source-map-cat --source-file hello-goodbye-jquery-min.js \
    hello.js.map goodbye.js.map jquery-1.9.0.min.map > hello-goodbye-jquery-min.js.map
Append source map url to combined file (or use HTTP X-SourceMap header)

echo '//@ sourceMappingURL=hello-goodbye-jquery-min.js.map' >> hello-goodbye-jquery-min.js
Generate a test HTML page

echo '' > index.html
Serve

python -m SimpleHTTPServer 3000 localhost
Open tab to check

python -m webbrowser -t http://localhost:3000/
Enable source maps in developer tools

Should see concatenated source

and original sources and breakpoints should map correctly.

#### Related Links:

* Mozilla's source-map node module
* HTML5 Rocks Source Maps tutorial
* CSS Ninja Multi-level source map article
* The new sections part of the source-map spec should save some space
* Nick Fitzgerald's weblog

##### Tools and Languages with Source Map Support

* closure compiler
* coffeescript redux
* JSMmin source map node module
and grunt plugin
* typescript
* UglifyJS 2

$3

Install:

``shell npm install --global source-map-cat`

Example Usage (run from project test directory):

`shell