Uglify with SourceMaps while using grunt usemin and rev

Question

I want to log javascript errors to server but the stacktrace is not useful with minified JS code. So I was thinking of using either Getsentry or Rollbar which shows proper stack trace with the help of sourcemaps. But I'm struggling to create sourcemap in first place.

I'm getting this error

"Destination (_build/js/app.js) not written because src files were empty."

Once it creates source map properly, there will be another problem i.e. rev will rename the file. I also need to leave the unminified concatenated file.

Below is my gruntfile.js (I've removed few bits out of it.)

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        clean: {
            jsFolders: {
                src: [
                    '_build/js/ui',
                    '_build/js/vendor',
                    '_build/js/app',
                    '_build/js/*templates.js'
                ]
            },
            build: {
                src: ['_build/**/*']
            }
        },

        copy: {
            build: {
                files: [{
                    expand: true,
                    src: [
                        'index.html',
                        'img/**/*', //includes web.cofig also.
                        'img/**/*.svg',
                        '!img/**/*.psd',
                        'js/**/*', //includes web.cofig also.
                        'css/**/*', //includes web.cofig also.
                        '*.png',
                        'favicon.ico'
                    ],
                    dest: '_build/'
                }]
            },
        },

        rev: {
            option: {
                algorithm: 'sha1',
                length: 4
            },
            all: {
                files: {
                    src: [
                        '_build/**/*.{js,css,eot,ttf,woff}'
                    ]
                }
            }
        },

        useminPrepare: {
            html: ['_build/index.html']
        },

        usemin: {
            html: [
                '_build/index.html'
            ],
            css: [
                '_build/css/**/*.css'
            ]
        },

        uglify: {
            options: {
                sourceMap: '_build/js/app.js.map',
            },
            js: {
                files: {
                    '_build/js/app.js': ['_build/js/app.js']
                }
            }
        },

        cssmin: {
            minify: {
                expand: true,
                cwd: '_build/css/',
                src: '*.css',
                dest: '_build/css/'
            }
        },
    });

grunt.registerTask('build', [
        'clean:build',
        'handlebars',
        'compass',
        'autoprefixer',
        'copy:build',
        'useminPrepare',
        'concat',
        'uglify',
        'cssmin',
        'clean:jsFolders',
        'rev',
        'usemin',
    ]);

};

UPDATE

Tried @Andy's solution, it still shows the same error "Destination (_build/js/app.js) not written because src files were empty." and it also says below while building

 uglify:
  { options:
   { sourceMap: true,
     sourceMapName: '_build/js/app.js.map' },
  js: { files: { '_build/js/app.js': [ '_build/js/app.js' ] } },
  generated:
   { files:
      [ { dest: 'dist\\js\\app.js',
          src: [ '.tmp\\concat\\js\\app.js' ] } ] } }

Don't know where it got dest name from. My output folder is _build.

UPDATE2:
Refer to below links for better solution
https://mcmap.net/q/1316343/-source-maps-with-grunt https://github.com/gruntjs/grunt-contrib-uglify/issues/39#issuecomment-14856100

Yeorgi

so, what's the actual solution? – Siddra

Answer 1

useminPrepare is merging the existing uglify config with its own, but nested under generated. Therefore this configuration for uglify works for me

grunt.initConfig({
  uglify: {
    generated: {
      options: {
        sourceMap: true
      }
    }
  }
});

Homoio

Thanks. I was a little confused where the uglify:generated was coming from – Ignace

Answer 2

There is no simple solution to getting sourcemaps to work with the usemin flow. Its a known problem that hasnt been addressed in a year it seems:

https://github.com/yeoman/grunt-usemin/issues/30

https://github.com/yeoman/grunt-usemin/issues/220

Buckish

Answer 3

The options for uglify are:

sourceMap: true,
sourceMapName: 'path/to/name.map'

For example, in my GruntFile.js I use the name found in package.json:

sourceMap: true,
sourceMapName: 'dist/<%= pkg.name %>-<%= pkg.version %>.map'

Airiness

I've updated the question with the results of implementing your solution – Yeorgi

this worked partly when I changed my output folder to dist instead of _build. So, it seems there is some hard-coded name dist within usemin. Issues remaining are 1. the concatenated-unminified file is in .tmp folder and doesn't stay beside the min file in js folder. 2. When I open and see the generated sourcemap, it is referring to app.js file instead of the rev'ed name i.e. <hash>.app.js. Now trying to get around those. – Yeorgi

Any luck with the reved name not being present at the bottom of the <hash>.app.js file? – Junia