Grunt使用sourcemaps进行concat和uglify

Question

我使用concat将JS文件合并成一个文件，使用uglify来最小化JavaScript。我该如何创建一个使用原始JS源文件的sourcemaps文件？

我的当前gruntfile：

concat: {
    options: {
        // define a string to put between each file in the concatenated output
        separator: ';'
    },
    dist: {
        // the files to concatenate
        src: ['<%= config.src %>/js/**/*.js'],
        // the location of the resulting JS file
         dest: '<%= config.dist %>/js/main.js'
    }
},

uglify: {
    dist: {
        files: {
            '<%= config.dist %>/js/main.min.js': ['<%= concat.dist.dest %>']
        }
    }
},

- user3483982

Answer 1

你需要在concat和uglify任务中启用源映射，并且必须为uglify任务指定sourceMapIn选项。

以下是样例grunt配置：

concat : {
  options : {
    sourceMap :true
  },
  dist : {
    src  : ['www/js/**/*.js'],
    dest : '.tmp/main.js'
  }
},
uglify : {
  options : {
    sourceMap : true,
    sourceMapIncludeSources : true,
    sourceMapIn : '.tmp/main.js.map'
  },
  dist : {
    src  : '<%= concat.dist.dest %>',
    dest : 'www/main.min.js'
  }
}

- Damon Friendship

---

这个答案已经帮助解决了一个类似的需求（将uglify源映射到require源以及单独的require模块）。谢谢！ - jerome

这个对我来说是有效的，但当使用缩小后的 JS 时（例如 Chrome 的控制台指向错误行为 320 而不是行 290），最终映射中的行号不正确。你有任何想法为什么会发生这种情况吗？ - Y0lk

在我的情况下，源映射已经生成，但是无法使用。当我设置断点时，代码不会停在那里。似乎这是uglifyjs的一个普遍问题，目前还没有解决。 - crackmigg

Y0lk，你是在添加一个恰好有30行的横幅吗？ - user1082202

sourceMapIn可以更方便地指定为（基于https://dev59.com/bmYq5IYBdhLWcg3wxTaq）： sourceMapIn: function(path) { return path + ".map"; }，这更通用，也支持多个源文件。 - Jonas Berlin

有人找到了解决断点无法停止的问题的方法吗？我也遇到了同样的问题。似乎一切都正常，但当我尝试在断点处停止时它就是不会停止。 - Biri

Answer 2

根据grunt-contrib-uglify文档，您可以在uglify过程中启用sourcemap生成。

您的uglify配置应该类似于：

uglify: {
        dist: {
            files: {
                '<%= config.dist %>/js/main.min.js': ['<%= concat.dist.dest %>']
            },
            options: {
                sourceMap: true
        }
    },

- Matthew Bakaitis

---

如果我只使用uglify，那是可以工作的，但我同时使用了uglify和concat。 - user3483982