如何使用 grunt-contrib-concat 和 grunt-contrib-uglify 为每个单独的 js 文件创建源映射？

Question

目前，concat 和 uglify 设置为：

concat: {
  options: {
    // options
  },
  angular: {
    src: ['public/**/*.js', '!public/**/*.min.js', '!public/lib/**/*.js'],
    dest: 'build/_main.js',
  }
},

uglify: {
  options: {
    mangle: false,
    sourceMap: true,
  },
  app: {
    files: {
      'public/js/app.min.js': ['build/_main.js']
    }
  },
  bower: {
    files: {
      'public/js/lib.min.js': ['build/_bower.js']
    }
  }
},

这会在 Sources 下的开发工具中创建一个源映射。这个源地图是可用的，但我宁愿能够逐个文件搜索文件并浏览开发工具中的每个文件。如果保留整个项目目录和文件结构，这样我就可以搜索和浏览每个文件并添加调试器等，那就太好了。

我该怎么做？

Answer 1

这可以通过如下配置您的任务来实现：

注意：下面的两种解决方案都要求concat任务在uglify任务之前运行。

1。为源映射使用默认生成的名称：

concat: {
  options: {
    sourceMap: true // <-- 1. Enable source maps
  },
  angular: {
    src: ['public/**/*.js', '!public/**/*.min.js', '!public/lib/**/*.js'],
    dest: 'build/_tsbc.js',
  }
},

uglify: {
  options: {
    mangle: false,
    sourceMap: true,
    sourceMapIn: './build/_tsbc.js.map' // <-- 2. Define .map file to use.
  },
  app: {
    files: {
      'public/js/app.min.js': ['build/_tsbc.js']
    }
  },
  // ...
}

说明

在您的 concat 任务中，您需要首先将 sourceMap 选项设置为 true。根据您当前的配置，这将在以下路径创建一个源映射文件：

build/_tsbc.js.map

注意：生成的地图文件的位置默认为与 concat 任务的 angular 目标中定义的相同 dest 路径 - 与附加 .map 后缀。
然后在您的 uglify 任务中添加 sourceMapIn 选项并将其值（字符串）设置为上面第一阶段生成的 .map 文件的路径.即
```
sourceMapIn: './build/_tsbc.js.map'
```

2。明确定义的源映射名称：

也可以为concat任务生成的source map文件定义具体名称和路径。例如：

concat: {
  options: {
    sourceMap: true,  // <-- 1. Enable source maps
    sourceMapName: 'build/my_map.map'  // <-- 2. Specify output path
  },
  angular: {
    src: ['public/**/*.js', '!public/**/*.min.js', '!public/lib/**/*.js'],
    dest: 'build/_tsbc.js',
  }
},

uglify: {
  options: {
    mangle: false,
    sourceMap: true,
    sourceMapIn: './build/my_map.map'  // <-- 3. Define .map file to use.
  },
  app: {
    files: {
      'public/js/app.min.js': ['build/_tsbc.js']
    }
  },
  // ...
}

说明

和之前一样，将sourceMap选项设置为true
这次添加sourceMapName选项，指定生成source map的路径

注意：生成地图文件的位置现在设置为：

'build/my_map.map'
同样，在您的 uglify 任务中添加 sourceMapIn 选项并将其值设置为上一点中指定的相同路径。即
```
sourceMapIn: './build/my_map.map'
```

编辑

我刚刚注意到您在 uglify 任务中的 bower 目标不依赖于前一个 concat 任务的输出。对于这种情况，您需要在每个目标中嵌套 options 对象。例如：

uglify: {
  app: {
    options: {  // <-- Specific options for `app` target 
      mangle: false,
      sourceMap: true,
      sourceMapIn: './build/my_map.map'  // <-- 3. Define .map file to use.
    },
    files: {
      'public/js/app.min.js': ['build/_tsbc.js']
    }
  },
  bower: {
    options: {  // <-- Specific options for `bower` target 
      mangle: false,
      sourceMap: true
      // <-- There's no `sourceMapIn` needed here.
    },
    files: {
      'public/js/lib.min.js': ['build/_bower.js']
    }
  }
},

如何使用 grunt-contrib-concat 和 grunt-contrib-uglify 为每个单独的 js 文件创建源映射？

How do I create a sourcemap for each individual js file with grunt-contrib-concat and grunt-contrib-uglify?

gruntjs

source-maps

grunt-contrib-concat

grunt-contrib-uglify

1。为源映射使用默认生成的名称：

2。明确定义的源映射名称：