使用多级源映射调试Javascript

Question

我有很多JavaScript文件，这些文件经过grunt uglify并分别缩小，并且进一步，我对它们进行grunt concat以获得带有源映射的单个捆绑的缩小文件。

防爆。

a.js，b.js，c.js ->丑化-> a.min.js，b.min.js，c.min.js ->的concat -> bundle.min.js

使用来自bundle.min.js的开发工具和源映射，我只能追溯到a.min.js / b.min.js / c.min.js。 我的目标是使用源映射来追溯到a.js / b.js / c.js。

Answer 1

您的要求可以实现，但是您需要将任务的顺序更改为以下内容：

---

a.js, b.js, c.js --> 的concat --> bundle.js --> 丑化 --> bundle.min.js

---

注意：更改了任务的顺序，以在拼合结果输出之前连接各个.js文件。

为什么必须更改任务顺序？

因为grunt-contrib- sourceMapIn提供了sourceMapIn选项，而grunt-contrib-concat却没有。 此外，通常的做法是在合并文件之前先对其进行串联 。

sourceMapIn选项的描述如下：

sourceMapIn

类型： String Function

默认值： undefined

输入源映射的位置来自早期的编译（例如来自CoffeeScript）。 如果提供了函数，则将uglify源作为参数传递，并将返回值用作sourceMap名称。 仅在只有一个源文件时才有意义。

Gruntfile.js

您的Gruntfile.js可以配置如下：

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.initConfig({
    concat: {
      options: {
        // ...
        sourceMap: true,
        sourceMapName: 'dist/js/bundle.map' // Specify path/name for sourceMap
      },
      my_target: {
        src: ['src/js/a.js', 'src/js/b.js', 'src/js/c.js'],
        dest: 'dist/js/bundle.js',
      },
    },
    uglify: {
      options: {
        // ...
        sourceMap: {
          includeSources: true
        },
        sourceMapIn: 'dist/js/bundle.map', // Specify the same path/name as
                                           // the `sourceMapName` value
                                           // in the `concat` task
      },
      my_target: {
        files: {
          'dist/js/bundle.min.js': ['dist/js/bundle.js']
        }
      }
    }
  });

  // Note we run the `concat` task before the `uglify` task.
  grunt.registerTask('default', ['concat:my_target', 'uglify:my_target']);
};

笔记：

1. 为concat.options.sourceMapName和uglify.options.sourceMapIn指定的路径值必须相同，例如dist/js/bundle.map 。

2. concat任务必须在uglify任务之前运行。

3. 这两个任务的src和dest路径将需要根据您的项目要求进行定义。