cat for Javascript sourcemaps

Install:

npm install --global source-map-cat

Example Usage (run from project test directory):

# 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 '<script src="hello-goodbye-jquery-min.js"></script>' > 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