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