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://stackoverflow.com/a/20574196/148271 https://github.com/gruntjs/grunt-contrib-uglify/issues/39#issuecomment-14856100

so, what's the actual solution? – JobaDiniz Jun 25 '15 at 13:29 — JobaDiniz, Jun 25 '15 at 13:29

score 5 · Answer 1 · answered Mar 10 '15 at 18:25

5

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
      }
    }
  }
});

answered Mar 10 '15 at 18:25

Andreas

451
5
14

Thanks. I was a little confused where the uglify:generated was coming from – neolaser Nov 04 '15 at 04:50

score 4 · Answer 2 · answered Feb 24 '14 at 19:18

4

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

answered Feb 24 '14 at 19:18

Vlad Gurovich

8,423
2
25
28

score 1 · Answer 3 · answered Feb 24 '14 at 15:50

1

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'

answered Feb 24 '14 at 15:50

Andy

39,764
8
53
80

I've updated the question with the results of implementing your solution – IsmailS Feb 24 '14 at 16:51
1

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. `.app.js`. Now trying to get around those. – IsmailS Feb 25 '14 at 07:06
Any luck with the reved name not being present at the bottom of the .app.js file? – balteo Apr 11 '15 at 19:47

Uglify with SourceMaps while using grunt usemin and rev

3 Answers3

Linked