Generating source maps for multiple concatenated javascript files compiled from Coffeescript

Question

Has any one had any success with this?

Answer 1

I think it's more or less an unsolved problem: https://github.com/jashkenas/coffee-script/issues/2779 . Last meanigingful comment was from jwalton, a month ago.

Still, it doesn't seem rocket science to add support for it, so it will probably come soon.

Michael Ficarra (creator of CoffeeScript Redux) suggested using https://github.com/michaelficarra/commonjs-everywhere .

Two caveats:

• It only works for bundling CommonJS modules.
• It uses CoffeeScript Redux, which is still in beta (although working quite well it seems), and not 100% compatible with original CoffeeScript compiler.

So this does not work for what you ask for specifically, "concatenation".

Added April 14

You might have luck with these: combine-source-map and/or generate-sourcemap, both by same author.

Added April 26

This looks really simple: https://npmjs.org/package/mapcat . You just have to feed it the individual source map files generated by the coffee compiler.

Added May 16

Mariusz Nowak has just released webmake-coffee. Like CommonJS Everywhere, it requires code to be organized as CommonJS modules. Unlike CommonJS everywhere, it uses regular CoffeeScript.

It also seems the Grunt Coffee-Script plugin has had source-map support for concatenated files for quite a while (two months), effectively proving my original answer to be incorrect.

The upcoming version 2.0 of Snockets will have support for it too.

Answer 2

I ended up going with browserify using coffeeify as the transform option, and enabling browserify's debug option. I bundle up the app on each request for my main.js file, and any runtime errors show up in my original source with pretty decent accuracy.

Sure beats mapping runtime errors in the concatenated/compiled js back to the coffee source with my eyeballs!

Answer 3

I needed to annotate AngularJS code before minification, but grunt-ng-annotate didn't accept input source maps, thus I would not be able to use maps generated by the CoffeeScript compiler.

Apparently, with gulp-sourcemaps this is not an issue:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')(); // loading gulp plugins lazily
                                       // remember to include them in the package.json

gulp.task('appJS', function() {
  // concatenate compiled .coffee files and js files into build/app.js
  gulp.src(['./app/**/*.js','./app/**/*.coffee'])
    .pipe($.sourcemaps.init())
    .pipe($['if'](/[.]coffee$/, $.coffee({bare: true}).on('error', $.util.log)))
    .pipe($.concat('app.js'))
    .pipe($.ngAnnotate())
    .pipe($.uglify())
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('./build'))
});

The same approach works in other situations, too. In my case, this is the only approach that worked.

Answer 4

I have written a grunt task that does this flawless. Check it out