Watchify not correctly processing source maps

Question

I'm using Browserify to bundle all my Javascript assets up. However Browserify starts to become very slow to build as an app gets more complex, so I switched to Watchify, which nicely solved that problem.

However, this introduced a new problem. I'm outputting source maps for debugging purposes during this, and minifying the output with Minifyify as well. On the first run through Watchify, this works fine, the source maps correctly map to the original files. If I then modify a file however, the source map ends up pointing to minified versions of the original files rather than the unminified versions.

I'm assuming this is because Watchify isn't taking in an input source map and then modifying it, but I'm not certain.

Here's my code:

var watchScripts = function() {
    var rebundle = function() {
        return bundler.bundle()
            .pipe(source('app.min.js'))
            .pipe(gulp.dest('build/scripts/'));
    };
    var bundler = watchify({
            entries: ['./app/scripts/app.js', './app/jsx/app.jsx'],
            extensions: ['.js', '.jsx']
        })
        .plugin('minifyify', {
            map: 'app.js.map',
            output: 'build/scripts/app.js.map'
        })
        .transform(reactify)
        .transform(debowerify)
        .on('update', rebundle);

    return rebundle();
};

What's going wrong here? Is it indeed that Watchify isn't taking the already existing source map into consideration on the second run-through, or is it something else? Either way, how do I get this working such that the source maps correctly link back to the unminified unbundled assets on the second and subsequent runs through Watchify?

Answer 1

If you haven't been following the GitHub issue Ash filed, watchify does not currently support minifyify.

Ben-ng, minifyify's author says (Oct 1, 2014):

i have not tested minifyify with watchify and do not intend to support it. minifyify is meant to be used in production, while watchify is meant to be used in development.

A note documenting this limitation has been added to the README.

The solution seems to be to use watchify only in development and then create a production bundle with minifyify for deployment/integration. This may mask bugs introduced by the minification itself, but hopefully these should be rare enough that it's okay to catch them in CI/staging.