简体   繁体   中英

Uglify with SourceMaps while using grunt usemin and rev

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 ie 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

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

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

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'

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM