在使用grunt usemin和rev的同时使用SourceMaps混淆代码

Question

我想要将JavaScript错误记录到服务器，但在使用JS压缩代码时堆栈跟踪不太有用。因此，我考虑使用Getsentry或Rollbar，这两者都可借助sourcemap显示适当的堆栈跟踪。但我无法首先创建。

我遇到了以下错误：

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

一旦正确地创建源映射，就会出现另一个问题，即rev会重命名该文件。我还需要保留未压缩的连接文件。

以下是我的Gruntfile.js（我从中删除了一些内容）。

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',
    ]);

};

更新

尝试了@Andy的解决方案，仍然显示相同的错误"Destination (_build/js/app.js) not written because src files were empty."并且在构建时还会显示下面的内容。

 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' ] } ] } }

我不知道为什么会出现名为dest的名称。我的输出文件夹是_build。 更新2：
请参考下面链接以获得更好的解决方案：
https://dev59.com/NnjZa4cB1Zd3GeqPgaMd#20574196 https://github.com/gruntjs/grunt-contrib-uglify/issues/39#issuecomment-14856100

- IsmailS

---

那么，实际的解决方案是什么？ - JobaDiniz

Answer 1

useminPrepare将现有的uglify配置与自己的配置合并，但是嵌套在generated下面。因此这个uglify的配置对我有效。

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

- Andreas

---

谢谢。我有点困惑uglify:generated是从哪里来的。 - neolaser

Answer 2

要让sourcemaps与usemin流程配合工作并没有简单的解决方案。 这是一个已知的问题，似乎已经一年未得到解决:

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

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

- Vlad Gurovich

Answer 3

uglify的选项包括：

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

例如，在我的GruntFile.js中，我使用在package.json中找到的名称：

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

- Andy

---

我已经更新了问题，并实现了您的解决方案的结果。 - IsmailS

当我将输出文件夹从_build更改为dist时，这部分工作了。因此，似乎在usemin中有一些硬编码名称dist。剩下的问题是：1.合并未压缩的文件位于.tmp文件夹中，并且不会与js文件夹中的最小文件并排。2.当我打开并查看生成的源映射时，它引用的是app.js文件，而不是rev'ed名称，即<hash>.app.js。现在正在尝试解决这些问题。 - IsmailS

在 <hash>.app.js 文件底部找不到已修改名称，有什么进展吗？ - balteo